<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Vue3 常用 | 海内存知已，天涯若比邻</title><meta name="keywords" content="前端,Vue"><meta name="author" content="mowei"><meta name="copyright" content="mowei"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="一、Vue3基础参考链接：https:&#x2F;&#x2F;blog.csdn.net&#x2F;qq1195566313&#x2F;category_11618172.html?spm&#x3D;1001.2014.3001.5482 1、Ref全家桶1 ref 接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 .value property，指向该内部值。  12345678910111213&lt;templat">
<meta property="og:type" content="article">
<meta property="og:title" content="Vue3 常用">
<meta property="og:url" content="https://gitee.com/momomomowei/blog/web/Vue3%E5%85%A8%E5%AE%B6%E6%A1%B6/index.html">
<meta property="og:site_name" content="海内存知已，天涯若比邻">
<meta property="og:description" content="一、Vue3基础参考链接：https:&#x2F;&#x2F;blog.csdn.net&#x2F;qq1195566313&#x2F;category_11618172.html?spm&#x3D;1001.2014.3001.5482 1、Ref全家桶1 ref 接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 .value property，指向该内部值。  12345678910111213&lt;templat">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://gitee.com/momomomowei/images/vue.png">
<meta property="article:published_time" content="2024-04-21T05:32:06.000Z">
<meta property="article:modified_time" content="2024-04-21T07:24:14.427Z">
<meta property="article:author" content="mowei">
<meta property="article:tag" content="前端">
<meta property="article:tag" content="Vue">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://gitee.com/momomomowei/images/vue.png"><link rel="shortcut icon" href="/media/favicon.png"><link rel="canonical" href="https://gitee.com/momomomowei/blog/web/Vue3%E5%85%A8%E5%AE%B6%E6%A1%B6/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: {"path":"search.xml","languages":{"hits_empty":"找不到您查询的内容：${query}"}},
  translate: {"defaultEncoding":2,"translateDelay":0,"msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"簡"},
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '天',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  source: {
    jQuery: 'https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js',
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css'
    },
    fancybox: {
      js: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js',
      css: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css'
    }
  },
  isPhotoFigcaption: true,
  islazyload: true,
  isanchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: 'Vue3 常用',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2024-04-21 15:24:14'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const fontSizeVal = saveToLocal.get('global-font-size')
    if (fontSizeVal !== undefined) {
      document.documentElement.style.setProperty('--global-font-size', fontSizeVal + 'px')
    }
    
    const detectApple = () => {
      if (GLOBAL_CONFIG_SITE.isHome && /iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    document.addEventListener('pjax:complete', detectApple)})(window)</script><meta name="generator" content="Hexo 5.4.2"></head><body><div id="loading-box"><div class="loading-left-bg"></div><div class="loading-right-bg"></div><div class="spinner-box"><div class="configure-border-1"><div class="configure-core"></div></div><div class="configure-border-2"><div class="configure-core"></div></div><div class="loading-word">加载中...</div></div></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "" data-lazy-src="/media/avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/archives/"><div class="headline">文章</div><div class="length-num">41</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/tags/"><div class="headline">标签</div><div class="length-num">29</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/categories/"><div class="headline">分类</div><div class="length-num">7</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 主页</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 目录</span><i class="fas fa-chevron-down expand hide"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></li><li><a class="site-page child" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></li><li><a class="site-page child" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('/images/vue.png')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">海内存知已，天涯若比邻</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 主页</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 目录</span><i class="fas fa-chevron-down expand hide"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></li><li><a class="site-page child" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></li><li><a class="site-page child" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Vue3 常用</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2024-04-21T05:32:06.000Z" title="发表于 2024-04-21 13:32:06">2024-04-21</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-04-21T07:24:14.427Z" title="更新于 2024-04-21 15:24:14">2024-04-21</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">14.7k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>72分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="Vue3 常用"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="一、Vue3基础"><a href="#一、Vue3基础" class="headerlink" title="一、Vue3基础"></a>一、Vue3基础</h1><p>参考链接：<a target="_blank" rel="noopener" href="https://blog.csdn.net/qq1195566313/category_11618172.html?spm=1001.2014.3001.5482">https://blog.csdn.net/qq1195566313/category_11618172.html?spm=1001.2014.3001.5482</a></p>
<h2 id="1、Ref全家桶"><a href="#1、Ref全家桶" class="headerlink" title="1、Ref全家桶"></a>1、Ref全家桶</h2><h3 id="1-ref"><a href="#1-ref" class="headerlink" title="1 ref"></a>1 ref</h3><blockquote>
<p>接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 <code>.value</code> property，指向该内部值。</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;button @click=&quot;changeMsg&quot;&gt;change&lt;/button&gt;</span><br><span class="line">    &lt;div&gt;&#123;&#123; message &#125;&#125;&lt;/div&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"> </span><br><span class="line">&lt;script setup lang=&quot;ts&quot;&gt;</span><br><span class="line">let message: string = &quot;我是message&quot;</span><br><span class="line">const changeMsg = () =&gt; &#123;</span><br><span class="line">   message = &quot;change msg&quot;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h3 id="2-isRef"><a href="#2-isRef" class="headerlink" title="2 isRef"></a>2 isRef</h3><blockquote>
<p>判断是不是一个ref对象</p>
</blockquote>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; ref, <span class="title class_">Ref</span>,isRef &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">message</span>: <span class="title class_">Ref</span>&lt;<span class="built_in">string</span> | <span class="built_in">number</span>&gt; = <span class="title function_">ref</span>(<span class="string">&quot;我是message&quot;</span>)</span><br><span class="line"><span class="keyword">let</span> <span class="attr">notRef</span>:<span class="built_in">number</span> = <span class="number">123</span></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">changeMsg</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">  message.<span class="property">value</span> = <span class="string">&quot;change msg&quot;</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">isRef</span>(message)); <span class="comment">//true</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">isRef</span>(notRef)); <span class="comment">//false</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="3-shallowRef"><a href="#3-shallowRef" class="headerlink" title="3 shallowRef"></a>3 shallowRef</h3><blockquote>
<p>创建一个跟踪自身 <code>.value</code> 变化的 ref，但不会使其值也变成响应式的</p>
</blockquote>
<p><strong>3.1 示例：修改其属性是非响应式的这样是不会改变的</strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;button @click=&quot;changeMsg&quot;&gt;change&lt;/button&gt;</span><br><span class="line">    &lt;div&gt;&#123;&#123; message &#125;&#125;&lt;/div&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"> </span><br><span class="line">&lt;script setup lang=&quot;ts&quot;&gt;</span><br><span class="line">import &#123; Ref, shallowRef &#125; from &#x27;vue&#x27;</span><br><span class="line">type Obj = &#123;</span><br><span class="line">  name: string</span><br><span class="line">&#125;</span><br><span class="line">let message: Ref&lt;Obj&gt; = shallowRef(&#123;</span><br><span class="line">  name: &quot;111111&quot;</span><br><span class="line">&#125;)</span><br><span class="line"> </span><br><span class="line">const changeMsg = () =&gt; &#123;</span><br><span class="line">  message.value.name = &#x27;2222222&#x27;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p><strong>3.2 示例：可以被监听到的修改value</strong></p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; <span class="title class_">Ref</span>, shallowRef &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">type</span> <span class="title class_">Obj</span> = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="built_in">string</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> <span class="attr">message</span>: <span class="title class_">Ref</span>&lt;<span class="title class_">Obj</span>&gt; = <span class="title function_">shallowRef</span>(&#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&quot;111111&quot;</span></span><br><span class="line">&#125;)</span><br><span class="line"> </span><br><span class="line"><span class="keyword">const</span> <span class="title function_">changeMsg</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">  message.<span class="property">value</span> = &#123; <span class="attr">name</span>: <span class="string">&quot;222222&quot;</span> &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="4-triggerRef"><a href="#4-triggerRef" class="headerlink" title="4 triggerRef"></a>4 triggerRef</h3><blockquote>
<p>强制更新页面DOM</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;button @click=&quot;changeMsg&quot;&gt;change&lt;/button&gt;</span><br><span class="line">    &lt;div&gt;&#123;&#123; message &#125;&#125;&lt;/div&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script setup lang=&quot;ts&quot;&gt;</span><br><span class="line">import &#123; Ref, shallowRef,triggerRef &#125; from &#x27;vue&#x27;</span><br><span class="line">type Obj = &#123;</span><br><span class="line">  name: string</span><br><span class="line">&#125;</span><br><span class="line">let message: Ref&lt;Obj&gt; = shallowRef(&#123;</span><br><span class="line">  name: &quot;11111&quot;</span><br><span class="line">&#125;)</span><br><span class="line"> </span><br><span class="line">const changeMsg = () =&gt; &#123;</span><br><span class="line">  message.value.name = &#x27;22222&#x27;</span><br><span class="line">  triggerRef(message)</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt; </span><br></pre></td></tr></table></figure>
<h3 id="5-customRef"><a href="#5-customRef" class="headerlink" title="5 customRef"></a>5 customRef</h3><blockquote>
<p>自定义ref</p>
<p>customRef 是个工厂函数要求我们返回一个对象 并且实现 get 和 set 适合去做防抖之类的，示例：</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div ref=&quot;div&quot;&gt;customRef&lt;/div&gt;</span><br><span class="line">      &lt;hr&gt;</span><br><span class="line">      &lt;div&gt;&#123;&#123; name &#125;&#125;&lt;/div&gt;</span><br><span class="line">      &lt;hr&gt;</span><br><span class="line">  &lt;button @click=&quot;change&quot;&gt;修改 customRef&lt;/button&gt;</span><br><span class="line"> </span><br><span class="line">&lt;/template&gt;</span><br><span class="line"> </span><br><span class="line">&lt;script setup lang=&#x27;ts&#x27;&gt;</span><br><span class="line">import &#123; ref, reactive, onMounted, shallowRef, customRef &#125; from &#x27;vue&#x27;</span><br><span class="line"> </span><br><span class="line">function myRef&lt;T = any&gt;(value: T) &#123;</span><br><span class="line">  let timer:any;</span><br><span class="line">  return customRef((track, trigger) =&gt; &#123;</span><br><span class="line">    return &#123;</span><br><span class="line">      get() &#123;</span><br><span class="line">        track()</span><br><span class="line">        return value</span><br><span class="line">      &#125;,</span><br><span class="line">      set(newVal) &#123;</span><br><span class="line">        clearTimeout(timer)</span><br><span class="line">        timer =  setTimeout(() =&gt; &#123;</span><br><span class="line">          console.log(&#x27;触发了set&#x27;)</span><br><span class="line">          value = newVal</span><br><span class="line">          trigger()</span><br><span class="line">        &#125;,500)</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br><span class="line">    </span><br><span class="line">const name = myRef&lt;string&gt;(&#x27;11111&#x27;)</span><br><span class="line">const change = () =&gt; &#123;</span><br><span class="line">  name.value = &#x27;22222&#x27;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h2 id="2、Reactive全家桶"><a href="#2、Reactive全家桶" class="headerlink" title="2、Reactive全家桶"></a>2、Reactive全家桶</h2><h3 id="1-reactive"><a href="#1-reactive" class="headerlink" title="1 reactive"></a>1 reactive</h3><blockquote>
<p>用来绑定复杂的数据类型 例如 对象 数组</p>
</blockquote>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; reactive &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">let</span> person = <span class="title function_">reactive</span>(&#123;</span><br><span class="line">   <span class="attr">name</span>:<span class="string">&quot;reactive&quot;</span></span><br><span class="line">&#125;)</span><br><span class="line">person.<span class="property">name</span> = <span class="string">&quot;reactive1111&quot;</span></span><br></pre></td></tr></table></figure>
<h3 id="2-readonly"><a href="#2-readonly" class="headerlink" title="2 readonly"></a>2 readonly</h3><blockquote>
<p>拷贝一份proxy对象将其设置为只读</p>
</blockquote>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; reactive ,<span class="keyword">readonly</span>&#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">const</span> person = <span class="title function_">reactive</span>(&#123;<span class="attr">count</span>:<span class="number">1</span>&#125;)</span><br><span class="line"><span class="keyword">const</span> copy = <span class="title function_">readonly</span>(person)</span><br><span class="line"> </span><br><span class="line"> <span class="comment">//person.count++</span></span><br><span class="line"> copy.<span class="property">count</span>++</span><br></pre></td></tr></table></figure>
<h3 id="3-shallowReactive"><a href="#3-shallowReactive" class="headerlink" title="3 shallowReactive"></a>3 shallowReactive</h3><blockquote>
<p>只能对浅层的数据 如果是深层的数据只会改变值 不会改变视图</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;div&gt;&#123;&#123; state &#125;&#125;&lt;/div&gt;</span><br><span class="line">    &lt;button @click=&quot;change1&quot;&gt;test1&lt;/button&gt;</span><br><span class="line">    &lt;button @click=&quot;change2&quot;&gt;test2&lt;/button&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script setup lang=&quot;ts&quot;&gt;</span><br><span class="line">import &#123; shallowReactive &#125; from &#x27;vue&#x27;</span><br><span class="line"></span><br><span class="line">const obj = &#123;</span><br><span class="line">  a: 1,</span><br><span class="line">  first: &#123;</span><br><span class="line">    b: 2,</span><br><span class="line">    second: &#123;</span><br><span class="line">      c: 3</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line">const state = shallowReactive(obj)</span><br><span class="line">function change1() &#123;</span><br><span class="line">  state.a = 7</span><br><span class="line">&#125;</span><br><span class="line">function change2() &#123;</span><br><span class="line">  state.first.b = 8</span><br><span class="line">  state.first.second.c = 9</span><br><span class="line">  console.log(state);</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt; </span><br></pre></td></tr></table></figure>
<h2 id="3、to系列全家桶"><a href="#3、to系列全家桶" class="headerlink" title="3、to系列全家桶"></a>3、to系列全家桶</h2><h3 id="1-toRef"><a href="#1-toRef" class="headerlink" title="1 toRef"></a>1 toRef</h3><blockquote>
<p>如果原始对象是非响应式的就不会更新视图 数据是会变的</p>
<p>如果原始对象是响应式的是会更新视图并且改变数据的</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">   &lt;div&gt;</span><br><span class="line">      &lt;button @click=&quot;change&quot;&gt;按钮&lt;/button&gt;</span><br><span class="line">      &#123;&#123;state&#125;&#125;</span><br><span class="line">   &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"> </span><br><span class="line">&lt;script setup lang=&quot;ts&quot;&gt;</span><br><span class="line">import &#123; reactive, toRef &#125; from &#x27;vue&#x27;</span><br><span class="line">const obj = &#123;</span><br><span class="line">   foo: 1,</span><br><span class="line">   bar: 1</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">const state = toRef(obj, &#x27;bar&#x27;)</span><br><span class="line">// bar 转化为响应式对象</span><br><span class="line">const change = () =&gt; &#123;</span><br><span class="line">   state.value++</span><br><span class="line">   console.log(obj, state);</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h3 id="2-toRefs"><a href="#2-toRefs" class="headerlink" title="2 toRefs"></a>2 toRefs</h3><blockquote>
<p>批量创建ref对象主要是方便我们解构使用</p>
</blockquote>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; reactive, toRefs &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">const</span> obj = <span class="title function_">reactive</span>(&#123;</span><br><span class="line">   <span class="attr">foo</span>: <span class="number">1</span>,</span><br><span class="line">   <span class="attr">bar</span>: <span class="number">1</span></span><br><span class="line">&#125;)</span><br><span class="line"> </span><br><span class="line"><span class="keyword">let</span> &#123; foo, bar &#125; = <span class="title function_">toRefs</span>(obj)</span><br><span class="line"> </span><br><span class="line">foo.<span class="property">value</span>++</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(foo, bar);</span><br></pre></td></tr></table></figure>
<h3 id="3-toRaw"><a href="#3-toRaw" class="headerlink" title="3 toRaw"></a>3 toRaw</h3><blockquote>
<p>将响应式对象转化为普通对象</p>
</blockquote>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; reactive, toRaw &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">const</span> obj = <span class="title function_">reactive</span>(&#123;</span><br><span class="line">   <span class="attr">foo</span>: <span class="number">1</span>,</span><br><span class="line">   <span class="attr">bar</span>: <span class="number">1</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> state = <span class="title function_">toRaw</span>(obj)</span><br><span class="line"><span class="comment">// 响应式对象转化为普通对象</span></span><br><span class="line"> </span><br><span class="line"><span class="keyword">const</span> <span class="title function_">change</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">   <span class="variable language_">console</span>.<span class="title function_">log</span>(obj, state);</span><br><span class="line"> </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="4、computed计算属性"><a href="#4、computed计算属性" class="headerlink" title="4、computed计算属性"></a>4、computed计算属性</h2><h3 id="1-函数形式"><a href="#1-函数形式" class="headerlink" title="1 函数形式"></a>1 函数形式</h3><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; computed, reactive, ref &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">let</span> price = <span class="title function_">ref</span>(<span class="number">0</span>)<span class="comment">//$0</span></span><br><span class="line"> </span><br><span class="line"><span class="keyword">let</span> m = computed&lt;<span class="built_in">string</span>&gt;(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">   <span class="keyword">return</span> <span class="string">`$`</span> + price.<span class="property">value</span></span><br><span class="line">&#125;)</span><br><span class="line"> </span><br><span class="line">price.<span class="property">value</span> = <span class="number">500</span></span><br></pre></td></tr></table></figure>
<h3 id="2-对象形式"><a href="#2-对象形式" class="headerlink" title="2 对象形式"></a>2 对象形式</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">   &lt;div&gt;&#123;&#123; mul &#125;&#125;&lt;/div&gt;</span><br><span class="line">   &lt;div @click=&quot;mul = 100&quot;&gt;click&lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"> </span><br><span class="line">&lt;script setup lang=&quot;ts&quot;&gt;</span><br><span class="line">import &#123; computed, ref &#125; from &#x27;vue&#x27;</span><br><span class="line">let price = ref&lt;number | string&gt;(1)//$0</span><br><span class="line">let mul = computed(&#123;</span><br><span class="line">   get: () =&gt; &#123;</span><br><span class="line">      return price.value</span><br><span class="line">   &#125;,</span><br><span class="line">   set: (value) =&gt; &#123;</span><br><span class="line">      price.value = &#x27;set&#x27; + value</span><br><span class="line">   &#125;</span><br><span class="line">&#125;)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h3 id="3-案例"><a href="#3-案例" class="headerlink" title="3 案例"></a>3 案例</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">   &lt;div&gt;</span><br><span class="line">      &lt;table style=&quot;width:800px&quot; border&gt;</span><br><span class="line">         &lt;thead&gt;</span><br><span class="line">            &lt;tr&gt;</span><br><span class="line">               &lt;th&gt;名称&lt;/th&gt;</span><br><span class="line">               &lt;th&gt;数量&lt;/th&gt;</span><br><span class="line">               &lt;th&gt;价格&lt;/th&gt;</span><br><span class="line">               &lt;th&gt;操作&lt;/th&gt;</span><br><span class="line">            &lt;/tr&gt;</span><br><span class="line">         &lt;/thead&gt;</span><br><span class="line">         &lt;tbody&gt;</span><br><span class="line">            &lt;tr :key=&quot;index&quot; v-for=&quot;(item, index) in data&quot;&gt;</span><br><span class="line">               &lt;td align=&quot;center&quot;&gt;&#123;&#123; item.name &#125;&#125;&lt;/td&gt;</span><br><span class="line">               &lt;td align=&quot;center&quot;&gt;</span><br><span class="line">                  &lt;button @click=&quot;AddAnbSub(item, false)&quot;&gt;-&lt;/button&gt;</span><br><span class="line">                  &#123;&#123; item.num &#125;&#125;</span><br><span class="line">                  &lt;button @click=&quot;AddAnbSub(item, true)&quot;&gt;+&lt;/button&gt;</span><br><span class="line">               &lt;/td&gt;</span><br><span class="line">               &lt;td align=&quot;center&quot;&gt;&#123;&#123; item.num * item.price &#125;&#125;&lt;/td&gt;</span><br><span class="line">               &lt;td align=&quot;center&quot;&gt;</span><br><span class="line">                  &lt;button @click=&quot;del(index)&quot;&gt;删除&lt;/button&gt;</span><br><span class="line">               &lt;/td&gt;</span><br><span class="line">            &lt;/tr&gt;</span><br><span class="line">         &lt;/tbody&gt;</span><br><span class="line">         &lt;tfoot&gt;</span><br><span class="line">            &lt;tr&gt;</span><br><span class="line">               &lt;td&gt;&lt;/td&gt;</span><br><span class="line">               &lt;td&gt;&lt;/td&gt;</span><br><span class="line">               &lt;td&gt;&lt;/td&gt;</span><br><span class="line">               &lt;td align=&quot;center&quot;&gt;总价:&#123;&#123; $total &#125;&#125;&lt;/td&gt;</span><br><span class="line">            &lt;/tr&gt;</span><br><span class="line">         &lt;/tfoot&gt;</span><br><span class="line">      &lt;/table&gt;</span><br><span class="line">   &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"> </span><br><span class="line">&lt;script setup lang=&quot;ts&quot;&gt;</span><br><span class="line">import &#123; computed, reactive, ref &#125; from &#x27;vue&#x27;</span><br><span class="line">type Shop = &#123;</span><br><span class="line">   name: string,</span><br><span class="line">   num: number,</span><br><span class="line">   price: number</span><br><span class="line">&#125;</span><br><span class="line">let $total = ref&lt;number&gt;(0)</span><br><span class="line">const data = reactive&lt;Shop[]&gt;([</span><br><span class="line">   &#123; name: &quot;小满的袜子&quot;, num: 1, price: 100 &#125;,</span><br><span class="line">   &#123; name: &quot;小满的裤子&quot;, num: 1, price: 200 &#125;,</span><br><span class="line">   &#123; name: &quot;小满的衣服&quot;, num: 1, price: 300 &#125;,</span><br><span class="line">   &#123; name: &quot;小满的毛巾&quot;, num: 1, price: 400 &#125;</span><br><span class="line">])</span><br><span class="line"> </span><br><span class="line">const AddAnbSub = (item: Shop, type: boolean = false): void =&gt; &#123;</span><br><span class="line">   if (item.num &gt; 1 &amp;&amp; !type) &#123;</span><br><span class="line">      item.num--</span><br><span class="line">   &#125;</span><br><span class="line">   if (item.num &lt;= 99 &amp;&amp; type) &#123;</span><br><span class="line">      item.num++</span><br><span class="line">   &#125;</span><br><span class="line">&#125;</span><br><span class="line">const del = (index: number) =&gt; &#123;</span><br><span class="line">   data.splice(index, 1)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">$total = computed&lt;number&gt;(() =&gt; &#123;</span><br><span class="line">   return data.reduce((prev, next) =&gt; &#123;</span><br><span class="line">      return prev + (next.num * next.price)</span><br><span class="line">   &#125;, 0)</span><br><span class="line">&#125;)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h2 id="5、watch侦听器"><a href="#5、watch侦听器" class="headerlink" title="5、watch侦听器"></a>5、watch侦听器</h2><blockquote>
<p>watch 需要侦听特定的数据源，并在单独的回调函数中执行副作用</p>
<p>watch第一个参数监听源</p>
<p>watch第二个参数回调函数cb（newVal,oldVal）</p>
<p>watch第三个参数一个options配置项是一个对象{</p>
<p>​        immediate\:true //是否立即调用一次</p>
<p>​        deep\:true //是否开启深度监听</p>
<p>}</p>
<p>监听reactive数据源使用提醒：</p>
<p>​     ①可以直接侦听响应式对象，会隐式地转换成深度监听；</p>
<p>​    ②不可以直接侦听响应式对象的属性值，只能通过返回该属性的 getter 函数</p>
</blockquote>
<h3 id="1-监听Ref"><a href="#1-监听Ref" class="headerlink" title="1 监听Ref"></a>1 监听Ref</h3><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; ref, watch &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">let</span> message = <span class="title function_">ref</span>(&#123;</span><br><span class="line">    <span class="attr">nav</span>:&#123;</span><br><span class="line">        <span class="attr">bar</span>:&#123;</span><br><span class="line">            <span class="attr">name</span>:<span class="string">&quot;&quot;</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="title function_">watch</span>(message, <span class="function">(<span class="params">newVal, oldVal</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;新的值----&#x27;</span>, newVal);</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;旧的值----&#x27;</span>, oldVal);</span><br><span class="line">&#125;,&#123;</span><br><span class="line">    <span class="attr">immediate</span>:<span class="literal">true</span>,</span><br><span class="line">    <span class="attr">deep</span>:<span class="literal">true</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h3 id="2-监听多个ref"><a href="#2-监听多个ref" class="headerlink" title="2 监听多个ref"></a>2 监听多个ref</h3><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; ref, watch ,reactive&#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"> </span><br><span class="line"><span class="keyword">let</span> message = <span class="title function_">ref</span>(<span class="string">&#x27;&#x27;</span>)</span><br><span class="line"><span class="keyword">let</span> message2 = <span class="title function_">ref</span>(<span class="string">&#x27;&#x27;</span>)</span><br><span class="line"> </span><br><span class="line"><span class="title function_">watch</span>([message,message2], <span class="function">(<span class="params">newVal, oldVal</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;新的值----&#x27;</span>, newVal);</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;旧的值----&#x27;</span>, oldVal);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h3 id="3-监听reactive-单一值"><a href="#3-监听reactive-单一值" class="headerlink" title="3 监听reactive 单一值"></a>3 监听reactive 单一值</h3><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; ref, watch ,reactive&#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">let</span> message = <span class="title function_">reactive</span>(&#123;</span><br><span class="line">    <span class="attr">name</span>:<span class="string">&quot;&quot;</span>,</span><br><span class="line">    <span class="attr">name2</span>:<span class="string">&quot;&quot;</span></span><br><span class="line">&#125;)</span><br><span class="line"> </span><br><span class="line"><span class="title function_">watch</span>(<span class="function">()=&gt;</span>message.<span class="property">name</span>, <span class="function">(<span class="params">newVal, oldVal</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;新的值----&#x27;</span>, newVal);</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;旧的值----&#x27;</span>, oldVal);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h2 id="6、watchEffect高级侦听器"><a href="#6、watchEffect高级侦听器" class="headerlink" title="6、watchEffect高级侦听器"></a>6、watchEffect高级侦听器</h2><blockquote>
<p>传入的一个函数，同时响应式追踪其依赖，并在其<code>依赖变更时重新运行该函数</code>。</p>
</blockquote>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 如果用到message 就只会监听message 就是用到几个监听几个 而且是非惰性 会默认调用一次</span></span><br><span class="line"><span class="keyword">let</span> message = ref&lt;<span class="built_in">string</span>&gt;(<span class="string">&#x27;&#x27;</span>)</span><br><span class="line"><span class="keyword">let</span> message2 = ref&lt;<span class="built_in">string</span>&gt;(<span class="string">&#x27;&#x27;</span>)</span><br><span class="line"> <span class="title function_">watchEffect</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">//console.log(&#x27;message&#x27;, message.value);</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;message2&#x27;</span>, message2.<span class="property">value</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>清除副作用</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; watchEffect, ref &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">let</span> message = ref&lt;<span class="built_in">string</span>&gt;(<span class="string">&#x27;&#x27;</span>)</span><br><span class="line"><span class="keyword">let</span> message2 = ref&lt;<span class="built_in">string</span>&gt;(<span class="string">&#x27;&#x27;</span>)</span><br><span class="line"> <span class="title function_">watchEffect</span>(<span class="function">(<span class="params">oninvalidate</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">//console.log(&#x27;message&#x27;, message.value);</span></span><br><span class="line">    <span class="title function_">oninvalidate</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">        </span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;message2&#x27;</span>, message2.<span class="property">value</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p><strong>停止跟踪 watchEffect 返回一个函数 调用之后将停止更新</strong></p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> stop =  <span class="title function_">watchEffect</span>(<span class="function">(<span class="params">oninvalidate</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">//console.log(&#x27;message&#x27;, message.value);</span></span><br><span class="line">    <span class="title function_">oninvalidate</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line"> </span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;message2&#x27;</span>, message2.<span class="property">value</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 调用之后将停止更新</span></span><br><span class="line"><span class="title function_">stop</span>()</span><br></pre></td></tr></table></figure>
<p><strong>更多的配置项</strong></p>
<p>副作用刷新时机 ,<code>flush 一般使用post</code></p>
<div class="table-container">
<table>
<thead>
<tr>
<th style="text-align:left"></th>
<th style="text-align:left">pre</th>
<th style="text-align:left">sync</th>
<th style="text-align:left">post</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">更新时机</td>
<td style="text-align:left">组件<strong>更新前</strong>执行</td>
<td style="text-align:left">强制效果始终同步触发</td>
<td style="text-align:left">组件<strong>更新后</strong>执行</td>
</tr>
</tbody>
</table>
</div>
<p><strong>onTrigger 可以帮助我们调试 watchEffect</strong></p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; watchEffect, ref &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">let</span> message = ref&lt;<span class="built_in">string</span>&gt;(<span class="string">&#x27;&#x27;</span>)</span><br><span class="line"><span class="keyword">let</span> message2 = ref&lt;<span class="built_in">string</span>&gt;(<span class="string">&#x27;&#x27;</span>)</span><br><span class="line"> <span class="title function_">watchEffect</span>(<span class="function">(<span class="params">oninvalidate</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">//console.log(&#x27;message&#x27;, message.value);</span></span><br><span class="line">    <span class="title function_">oninvalidate</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line"> </span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;message2&#x27;</span>, message2.<span class="property">value</span>);</span><br><span class="line">&#125;,&#123;</span><br><span class="line">    <span class="attr">flush</span>:<span class="string">&quot;post&quot;</span>,</span><br><span class="line">    onTrigger () &#123;</span><br><span class="line">        </span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h2 id="7、生命周期"><a href="#7、生命周期" class="headerlink" title="7、生命周期"></a>7、生命周期</h2><blockquote>
<p>使用Vue3 组合式API是没有 <code>beforeCreate 和 created 这两个生命周期的</code></p>
</blockquote>
<h3 id="1-onBeforeMount"><a href="#1-onBeforeMount" class="headerlink" title="1 onBeforeMount()"></a>1 onBeforeMount()</h3><p>在组件DOM实际渲染安装之前调用。在这一步中，根元素还不存在。</p>
<h3 id="2-onMounted"><a href="#2-onMounted" class="headerlink" title="2 onMounted()"></a>2 onMounted()</h3><p>在组件的第一次渲染后调用，该元素现在可用，允许直接DOM访问</p>
<h3 id="3-onBeforeUpdate"><a href="#3-onBeforeUpdate" class="headerlink" title="3 onBeforeUpdate()"></a>3 onBeforeUpdate()</h3><p>数据更新时调用，发生在虚拟 DOM 打补丁之前。</p>
<h3 id="4-updated"><a href="#4-updated" class="headerlink" title="4 updated()"></a>4 updated()</h3><p>DOM更新后，updated的方法即会调用。</p>
<h3 id="5-onBeforeUnmount"><a href="#5-onBeforeUnmount" class="headerlink" title="5 onBeforeUnmount()"></a>5 onBeforeUnmount()</h3><p>在卸载组件实例之前调用。在这个阶段，实例仍然是完全正常的。</p>
<h3 id="6-onUnmounted"><a href="#6-onUnmounted" class="headerlink" title="6 onUnmounted()"></a>6 onUnmounted()</h3><p>卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载。</p>
<h2 id="8、组件传参"><a href="#8、组件传参" class="headerlink" title="8、组件传参"></a>8、组件传参</h2><h3 id="1-父传子"><a href="#1-父传子" class="headerlink" title="1 父传子"></a>1 父传子</h3><blockquote>
<p>父组件通过v-bind绑定一个数据，然后子组件通过defineProps接受传过来的值</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">    &lt;div class=&quot;layout&quot;&gt;</span><br><span class="line">        &lt;Menu :data=&quot;data&quot;  title=&quot;我是标题&quot;&gt;&lt;/Menu&gt;</span><br><span class="line">        &lt;div class=&quot;layout-right&quot;&gt;</span><br><span class="line">            &lt;Header&gt;&lt;/Header&gt;</span><br><span class="line">            &lt;Content&gt;&lt;/Content&gt;</span><br><span class="line">        &lt;/div&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"> </span><br><span class="line">&lt;script setup lang=&quot;ts&quot;&gt;</span><br><span class="line">import Menu from &#x27;./Menu/index.vue&#x27;</span><br><span class="line">import Header from &#x27;./Header/index.vue&#x27;</span><br><span class="line">import Content from &#x27;./Content/index.vue&#x27;</span><br><span class="line">import &#123; reactive &#125; from &#x27;vue&#x27;;</span><br><span class="line"> </span><br><span class="line">const data = reactive&lt;number[]&gt;([1, 2, 3])</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<p>子组件接受值</p>
<blockquote>
<p>通过defineProps 来接受 <strong>defineProps是无须引入的直接使用即可</strong></p>
<p>如果我们使用的TypeScript</p>
<p>可以使用传递字面量类型的纯类型语法做为参数</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">    &lt;div class=&quot;menu&quot;&gt;</span><br><span class="line">        菜单区域 &#123;&#123; title &#125;&#125;</span><br><span class="line">        &lt;div&gt;&#123;&#123; data &#125;&#125;&lt;/div&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"> </span><br><span class="line">&lt;script setup lang=&quot;ts&quot;&gt;</span><br><span class="line">defineProps&lt;&#123;</span><br><span class="line">    title:string,</span><br><span class="line">    data:number[]</span><br><span class="line">&#125;&gt;()</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line">// 如果使用的不是TS</span><br><span class="line">defineProps(&#123;</span><br><span class="line">    title:&#123;</span><br><span class="line">        default:&quot;&quot;,</span><br><span class="line">        type:string</span><br><span class="line">    &#125;,</span><br><span class="line">    data:Array</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h3 id="2-默认值"><a href="#2-默认值" class="headerlink" title="2 默认值"></a>2 默认值</h3><blockquote>
<p>TS 特有的默认值方式：withDefaults是个函数也是无须引入开箱即用接受一个props函数第二个参数是一个对象设置默认值</p>
</blockquote>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> <span class="title class_">Props</span> = &#123;</span><br><span class="line">    title?: <span class="built_in">string</span>,</span><br><span class="line">    data?: <span class="built_in">number</span>[]</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">withDefaults</span>(defineProps&lt;<span class="title class_">Props</span>&gt;(), &#123;</span><br><span class="line">    <span class="attr">title</span>: <span class="string">&quot;张三&quot;</span>,</span><br><span class="line">    <span class="attr">data</span>: <span class="function">() =&gt;</span> [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h3 id="3-子传父"><a href="#3-子传父" class="headerlink" title="3 子传父"></a>3 子传父</h3><blockquote>
<p>通过defineEmits派发一个事件</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">    &lt;div class=&quot;menu&quot;&gt;</span><br><span class="line">        &lt;button @click=&quot;clickTap&quot;&gt;派发给父组件&lt;/button&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"> </span><br><span class="line">&lt;script setup lang=&quot;ts&quot;&gt;</span><br><span class="line">import &#123; reactive &#125; from &#x27;vue&#x27;</span><br><span class="line">const list = reactive&lt;number[]&gt;([4, 5, 6])</span><br><span class="line"> </span><br><span class="line">const emit = defineEmits([&#x27;on-click&#x27;])</span><br><span class="line">const clickTap = () =&gt; &#123;</span><br><span class="line">    emit(&#x27;on-click&#x27;, list)</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<p>父组件接受子组件的事件</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">    &lt;div class=&quot;layout&quot;&gt;</span><br><span class="line">        &lt;Menu @on-click=&quot;getList&quot;&gt;&lt;/Menu&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"> </span><br><span class="line">&lt;script setup lang=&quot;ts&quot;&gt;</span><br><span class="line">import Menu from &#x27;./Menu/index.vue&#x27;</span><br><span class="line">import &#123; reactive &#125; from &#x27;vue&#x27;;</span><br><span class="line"> </span><br><span class="line">const data = reactive&lt;number[]&gt;([1, 2, 3])</span><br><span class="line"> </span><br><span class="line">const getList = (list: number[]) =&gt; &#123;</span><br><span class="line">    console.log(list,&#x27;父组件接受子组件&#x27;);</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h3 id="4-子组件暴露给父组件内部属性"><a href="#4-子组件暴露给父组件内部属性" class="headerlink" title="4 子组件暴露给父组件内部属性"></a>4 子组件暴露给父组件内部属性</h3><blockquote>
<p>通过defineExpose</p>
<p>类型“never”上不存在属性“xxx”报错如何修复：<code>Sons.value?.[&#39;属性名&#39;]</code></p>
</blockquote>
<p>从父组件获取子组件实例通过ref</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;<span class="title class_">Menu</span> ref=<span class="string">&quot;menus&quot;</span>&gt;&lt;/<span class="title class_">Menu</span>&gt;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> menus = <span class="title function_">ref</span>(<span class="literal">null</span>)</span><br></pre></td></tr></table></figure>
<p>父组件想要读到子组件的属性可以通过 defineExpose暴露</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> list = reactive&lt;<span class="built_in">number</span>[]&gt;([<span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>])</span><br><span class="line"> </span><br><span class="line"><span class="title function_">defineExpose</span>(&#123;</span><br><span class="line">    list</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>打印menus.value 发现属性</p>
<h3 id="5-兄弟组件传参"><a href="#5-兄弟组件传参" class="headerlink" title="5 兄弟组件传参"></a>5 兄弟组件传参</h3><h4 id="5-1-借助父组件传参"><a href="#5-1-借助父组件传参" class="headerlink" title="5.1.借助父组件传参"></a>5.1.借助父组件传参</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">        &lt;A @on-click=&quot;getFalg&quot;&gt;&lt;/A&gt;</span><br><span class="line">        &lt;B :flag=&quot;Flag&quot;&gt;&lt;/B&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">    </span><br><span class="line">&lt;script setup lang=&#x27;ts&#x27;&gt;</span><br><span class="line">import A from &#x27;./components/A.vue&#x27;</span><br><span class="line">import B from &#x27;./components/B.vue&#x27;</span><br><span class="line">import &#123; ref &#125; from &#x27;vue&#x27;</span><br><span class="line">let Flag = ref&lt;boolean&gt;(false)</span><br><span class="line">const getFalg = (flag: boolean) =&gt; &#123;</span><br><span class="line">   Flag.value = flag;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h3 id="6-Event-Bus"><a href="#6-Event-Bus" class="headerlink" title="6.Event Bus"></a>6.Event Bus</h3><blockquote>
<p>我们在Vue2 可以使用<script type="math/tex">emit 传递</script>on监听 emit传递过来的事件</p>
<p>这个原理其实是运用了JS设计模式之发布订阅模式</p>
<p>挂载到Vue config 全局就可以使用</p>
</blockquote>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"> <span class="comment">// 简易版</span></span><br><span class="line"><span class="keyword">type</span> <span class="title class_">BusClass</span>&lt;T&gt; = &#123;</span><br><span class="line">    <span class="attr">emit</span>: <span class="function">(<span class="params">name: T</span>) =&gt;</span> <span class="built_in">void</span></span><br><span class="line">    <span class="attr">on</span>: <span class="function">(<span class="params">name: T, callback: <span class="built_in">Function</span></span>) =&gt;</span> <span class="built_in">void</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">type</span> <span class="title class_">BusParams</span> = <span class="built_in">string</span> | <span class="built_in">number</span> | <span class="built_in">symbol</span> </span><br><span class="line"><span class="keyword">type</span> <span class="title class_">List</span> = &#123;</span><br><span class="line">    [<span class="attr">key</span>: <span class="title class_">BusParams</span>]: <span class="title class_">Array</span>&lt;<span class="title class_">Function</span>&gt;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Bus</span>&lt;T <span class="keyword">extends</span> <span class="title class_">BusParams</span>&gt; <span class="keyword">implements</span> <span class="title class_">BusClass</span>&lt;T&gt; &#123;</span><br><span class="line">    <span class="attr">list</span>: <span class="title class_">List</span></span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">list</span> = &#123;&#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title function_">emit</span>(<span class="params">name: T, ...args: <span class="built_in">Array</span>&lt;<span class="built_in">any</span>&gt;</span>) &#123;</span><br><span class="line">        <span class="keyword">let</span> <span class="attr">eventName</span>: <span class="title class_">Array</span>&lt;<span class="title class_">Function</span>&gt; = <span class="variable language_">this</span>.<span class="property">list</span>[name]</span><br><span class="line">        eventName.<span class="title function_">forEach</span>(<span class="function"><span class="params">ev</span> =&gt;</span> &#123;</span><br><span class="line">            ev.<span class="title function_">apply</span>(<span class="variable language_">this</span>, args)</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title function_">on</span>(<span class="params">name: T, callback: <span class="built_in">Function</span></span>) &#123;</span><br><span class="line">        <span class="keyword">let</span> <span class="attr">fn</span>: <span class="title class_">Array</span>&lt;<span class="title class_">Function</span>&gt; = <span class="variable language_">this</span>.<span class="property">list</span>[name] || [];</span><br><span class="line">        fn.<span class="title function_">push</span>(callback)</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">list</span>[name] = fn</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">new</span> <span class="title class_">Bus</span>&lt;<span class="built_in">number</span>&gt;()</span><br></pre></td></tr></table></figure>
<h3 id="7-集成Mitt"><a href="#7-集成Mitt" class="headerlink" title="7 集成Mitt"></a>7 集成Mitt</h3><p>推荐使用：<a target="_blank" rel="noopener" href="https://xiaoman.blog.csdn.net/article/details/125453908">https://xiaoman.blog.csdn.net/article/details/125453908</a></p>
<h2 id="9、组件"><a href="#9、组件" class="headerlink" title="9、组件"></a>9、组件</h2><h3 id="1-全局组件"><a href="#1-全局组件" class="headerlink" title="1 全局组件"></a>1 全局组件</h3><p>封装一个Card组件想在任何地方去使用</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div class=&quot;card&quot;&gt;</span><br><span class="line">     &lt;div class=&quot;card-header&quot;&gt;</span><br><span class="line">         &lt;div&gt;标题&lt;/div&gt;</span><br><span class="line">         &lt;div&gt;副标题&lt;/div&gt;</span><br><span class="line">     &lt;/div&gt;</span><br><span class="line">     &lt;div v-if=&#x27;content&#x27; class=&quot;card-content&quot;&gt;</span><br><span class="line">         &#123;&#123;content&#125;&#125;</span><br><span class="line">     &lt;/div&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"> </span><br><span class="line">&lt;script setup lang=&quot;ts&quot;&gt;</span><br><span class="line">type Props = &#123;</span><br><span class="line">    content:string</span><br><span class="line">&#125;</span><br><span class="line">defineProps&lt;Props&gt;()</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"> </span><br><span class="line">&lt;style scoped lang=&#x27;less&#x27;&gt;</span><br><span class="line">@border:#ccc;</span><br><span class="line">.card&#123;</span><br><span class="line">    width: 300px;</span><br><span class="line">    border: 1px solid @border;</span><br><span class="line">    border-radius: 3px;</span><br><span class="line">    &amp;:hover&#123;</span><br><span class="line">        box-shadow:0 0 10px @border;</span><br><span class="line">    &#125;</span><br><span class="line"> </span><br><span class="line">    &amp;-content&#123;</span><br><span class="line">        padding: 10px;</span><br><span class="line">    &#125;</span><br><span class="line">    &amp;-header&#123;</span><br><span class="line">        display: flex;</span><br><span class="line">        justify-content: space-between;</span><br><span class="line">        padding: 10px;</span><br><span class="line">        border-bottom: 1px solid @border;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
<blockquote>
<p>在main.ts 引入我们的组件跟随在createApp(App) 后面 切记不能放到mount 后面这是一个链式调用，其次调用 component 第一个参数组件名称 第二个参数组件实例</p>
</blockquote>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; createApp &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">App</span> <span class="keyword">from</span> <span class="string">&#x27;./App.vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;./assets/css/reset/index.less&#x27;</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Card</span> <span class="keyword">from</span> <span class="string">&#x27;./components/Card/index.vue&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="title function_">createApp</span>(<span class="title class_">App</span>).<span class="title function_">component</span>(<span class="string">&#x27;Card&#x27;</span>,<span class="title class_">Card</span>).<span class="title function_">mount</span>(<span class="string">&#x27;#app&#x27;</span>)</span><br></pre></td></tr></table></figure>
<p>直接在其他vue页面 立即使用即可 无需引入</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">     &lt;Card&gt;&lt;/Card&gt;</span><br><span class="line">&lt;/template&gt;</span><br></pre></td></tr></table></figure>
<h3 id="2-局部组件"><a href="#2-局部组件" class="headerlink" title="2 局部组件"></a>2 局部组件</h3><blockquote>
<p>就是在一个组件内（A） 通过import 去引入别的组件(B) 称之为局部组件</p>
<p>应为B组件只能在A组件内使用 所以是局部组件</p>
<p>如果C组件想用B组件 就需要C组件也手动import 引入 B 组件</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div class=&quot;wraps&quot;&gt;</span><br><span class="line">    &lt;layout-menu :flag=&quot;flag&quot; @on-click=&quot;getMenu&quot; @on-toogle=&quot;getMenuItem&quot; :data=&quot;menuList&quot; class=&quot;wraps-left&quot;&gt;&lt;/layout-menu&gt;</span><br><span class="line">    &lt;div class=&quot;wraps-right&quot;&gt;</span><br><span class="line">      &lt;layout-header&gt; &lt;/layout-header&gt;</span><br><span class="line">      &lt;layout-main class=&quot;wraps-right-main&quot;&gt;&lt;/layout-main&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"> </span><br><span class="line">&lt;script setup lang=&quot;ts&quot;&gt;</span><br><span class="line">import &#123; reactive,ref &#125; from &quot;vue&quot;;</span><br><span class="line">import layoutHeader from &quot;./Header.vue&quot;;</span><br><span class="line">import layoutMenu from &quot;./Menu.vue&quot;;</span><br><span class="line">import layoutMain from &quot;./Content.vue&quot;;</span><br><span class="line">    </span><br><span class="line">    ...............</span><br></pre></td></tr></table></figure>
<h3 id="3-递归组件"><a href="#3-递归组件" class="headerlink" title="3 递归组件"></a>3 递归组件</h3><p>案例递归树</p>
<ul>
<li>在父组件配置数据结构 数组对象格式 传给子组件</li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> <span class="title class_">TreeList</span> = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="built_in">string</span>;</span><br><span class="line">  icon?: <span class="built_in">string</span>;</span><br><span class="line">  children?: <span class="title class_">TreeList</span>[] | [];</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">const</span> data = reactive&lt;<span class="title class_">TreeList</span>[]&gt;([</span><br><span class="line">  &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;no.1&quot;</span>,</span><br><span class="line">    <span class="attr">children</span>: [</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">name</span>: <span class="string">&quot;no.1-1&quot;</span>,</span><br><span class="line">        <span class="attr">children</span>: [</span><br><span class="line">          &#123;</span><br><span class="line">            <span class="attr">name</span>: <span class="string">&quot;no.1-1-1&quot;</span>,</span><br><span class="line">          &#125;,</span><br><span class="line">        ],</span><br><span class="line">      &#125;,</span><br><span class="line">    ],</span><br><span class="line">  &#125;,</span><br><span class="line">  &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;no.2&quot;</span>,</span><br><span class="line">    <span class="attr">children</span>: [</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">name</span>: <span class="string">&quot;no.2-1&quot;</span>,</span><br><span class="line">      &#125;,</span><br><span class="line">    ],</span><br><span class="line">  &#125;,</span><br><span class="line">  &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;no.3&quot;</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">]);</span><br></pre></td></tr></table></figure>
<ul>
<li>子组件接收值</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">	  &lt;div style=&quot;margin-left:10px;&quot; class=&quot;tree&quot;&gt;</span><br><span class="line">        &lt;div :key=&quot;index&quot; v-for=&quot;(item,index) in data&quot;&gt;</span><br><span class="line">          &lt;div @click=&#x27;clickItem(item)&#x27;&gt;&#123;&#123;item.name&#125;&#125;</span><br><span class="line">        &lt;/div&gt;</span><br><span class="line">        &lt;TreeItem @on-click=&#x27;clickItem&#x27; v-if=&#x27;item?.children?.length&#x27; :data=&quot;item.children&quot;&gt;&lt;/TreeItem&gt;</span><br><span class="line">      &lt;/div&gt;</span><br><span class="line">      &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script setup lang=&quot;ts&quot;&gt;</span><br><span class="line">    type TreeList = &#123;</span><br><span class="line">      name: string;</span><br><span class="line">      icon?: string;</span><br><span class="line">      children?: TreeList[] | [];</span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    type Props&lt;T&gt; = &#123;</span><br><span class="line">      data?: T[] | [];</span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    defineProps&lt;Props&lt;TreeList&gt;&gt;();</span><br><span class="line"></span><br><span class="line">    const clickItem = (item: TreeList) =&gt; &#123;</span><br><span class="line">      console.log(item)</span><br><span class="line">    &#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line">// 子组件增加一个script 定义组件名称为了 递归用 </span><br><span class="line">&lt;script lang=&quot;ts&quot;&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">  name:&quot;TreeItem&quot;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h3 id="4-动态组件"><a href="#4-动态组件" class="headerlink" title="4 动态组件"></a>4 动态组件</h3><blockquote>
<p>什么是动态组件 就是：让多个组件使用同一个<a target="_blank" rel="noopener" href="https://so.csdn.net/so/search?q=挂载\&amp;spm=1001.2101.3001.7020">挂载</a>点，并动态切换，这就是动态组件。</p>
<p>在挂载点使用<a target="_blank" rel="noopener" href="https://so.csdn.net/so/search?q=component\&amp;spm=1001.2101.3001.7020">component</a>标签，然后使用v-bind\:is=”组件”</p>
<p>使用场景: tab切换居多</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">// 引入组件</span><br><span class="line">import A from &#x27;./A.vue&#x27;</span><br><span class="line">import B from &#x27;./B.vue&#x27;</span><br><span class="line"></span><br><span class="line">&lt;component :is=&quot;A&quot;&gt;&lt;/component&gt;</span><br></pre></td></tr></table></figure>
<blockquote>
<p>注意事项</p>
<p>1.在Vue2 的时候is 是通过组件名称切换的 在Vue3 setup 是通过组件实例切换的</p>
<p>2.如果你把组件实例放到Reactive Vue会给你一个警告runtime-core.esm-bundler.js:38 [Vue warn]: Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with <code>markRaw</code> or using <code>shallowRef</code> instead of <code>ref</code>.<br>Component that was made reactive:</p>
<p>这是因为reactive 会进行proxy 代理 而我们组件代理之后毫无用处 节省性能开销 推荐我们使用shallowRef 或者  markRaw 跳过proxy 代理</p>
</blockquote>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 修改如下</span></span><br><span class="line"><span class="keyword">const</span> tab = reactive&lt;<span class="title class_">Com</span>[]&gt;([&#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;A组件&quot;</span>,</span><br><span class="line">    <span class="attr">comName</span>: <span class="title function_">markRaw</span>(A)</span><br><span class="line">&#125;, &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;B组件&quot;</span>,</span><br><span class="line">    <span class="attr">comName</span>: <span class="title function_">markRaw</span>(B)</span><br><span class="line">&#125;])</span><br></pre></td></tr></table></figure>
<h2 id="10、插槽slot"><a href="#10、插槽slot" class="headerlink" title="10、插槽slot"></a>10、插槽slot</h2><blockquote>
<p><a target="_blank" rel="noopener" href="https://so.csdn.net/so/search?q=插槽\&amp;spm=1001.2101.3001.7020">插槽</a>就是子组件中的提供给父组件使用的一个<a target="_blank" rel="noopener" href="https://so.csdn.net/so/search?q=占位符\&amp;spm=1001.2101.3001.7020">占位符</a>，用\<slot>\</slot> 表示，父组件可以在这个<a target="_blank" rel="noopener" href="https://so.csdn.net/so/search?q=占位符\&amp;spm=1001.2101.3001.7020">占位符</a>中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的\<slot>\</slot>标签。</p>
</blockquote>
<h3 id="1-匿名插槽"><a href="#1-匿名插槽" class="headerlink" title="1 匿名插槽"></a>1 匿名插槽</h3><p>在子组件放置一个插槽</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">       &lt;slot&gt;&lt;/slot&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br></pre></td></tr></table></figure>
<p>父组件使用插槽</p>
<p>在父组件给这个插槽填充内容</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;Dialog&gt;</span><br><span class="line">    &lt;template v-slot&gt;</span><br><span class="line">		&lt;div&gt;2132&lt;/div&gt;</span><br><span class="line">    &lt;/template&gt;</span><br><span class="line">&lt;/Dialog&gt;</span><br></pre></td></tr></table></figure>
<h3 id="2-具名插槽"><a href="#2-具名插槽" class="headerlink" title="2 具名插槽"></a>2 具名插槽</h3><blockquote>
<p>具名插槽其实就是给插槽取个名字。一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;div&gt;</span><br><span class="line">    &lt;slot name=&quot;header&quot;&gt;&lt;/slot&gt;</span><br><span class="line">    &lt;slot&gt;&lt;/slot&gt;</span><br><span class="line">    &lt;slot name=&quot;footer&quot;&gt;&lt;/slot&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<p>父组件使用需对应名称</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;Dialog&gt;</span><br><span class="line">    &lt;template v-slot:header&gt;</span><br><span class="line">		&lt;div&gt;1&lt;/div&gt;</span><br><span class="line">    &lt;/template&gt;</span><br><span class="line">    </span><br><span class="line">    &lt;template v-slot&gt;</span><br><span class="line">		&lt;div&gt;2&lt;/div&gt;</span><br><span class="line">    &lt;/template&gt;</span><br><span class="line">    </span><br><span class="line">    &lt;template v-slot:footer&gt;</span><br><span class="line">		&lt;div&gt;3&lt;/div&gt;</span><br><span class="line">    &lt;/template&gt;</span><br><span class="line">&lt;/Dialog&gt;</span><br></pre></td></tr></table></figure>
<p>插槽简写</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;Dialog&gt;</span><br><span class="line">    &lt;template #header&gt;</span><br><span class="line">        &lt;div&gt;1&lt;/div&gt;</span><br><span class="line">    &lt;/template&gt;</span><br><span class="line">    </span><br><span class="line">    &lt;template #default&gt;</span><br><span class="line">        &lt;div&gt;2&lt;/div&gt;</span><br><span class="line">    &lt;/template&gt;</span><br><span class="line">    </span><br><span class="line">    &lt;template #footer&gt;</span><br><span class="line">        &lt;div&gt;3&lt;/div&gt;</span><br><span class="line">    &lt;/template&gt;</span><br><span class="line">&lt;/Dialog&gt;</span><br></pre></td></tr></table></figure>
<h3 id="3-作用域插槽"><a href="#3-作用域插槽" class="headerlink" title="3 作用域插槽"></a>3 作用域插槽</h3><p>在子组件动态绑定参数 派发给父组件的slot去使用</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&lt;div&gt;</span><br><span class="line">    &lt;slot name=&quot;header&quot;&gt;&lt;/slot&gt;</span><br><span class="line">    </span><br><span class="line">    &lt;div&gt;</span><br><span class="line">        &lt;div v-for=&quot;item in 100&quot;&gt;</span><br><span class="line">            &lt;slot :data=&quot;item&quot;&gt;&lt;/slot&gt;</span><br><span class="line">        &lt;/div&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    </span><br><span class="line">    &lt;slot name=&quot;footer&quot;&gt;&lt;/slot&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<p>通过结构方式取值</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;Dialog&gt;</span><br><span class="line">    &lt;template #header&gt;</span><br><span class="line">    	&lt;div&gt;1&lt;/div&gt;</span><br><span class="line">    &lt;/template&gt;</span><br><span class="line">    </span><br><span class="line">    &lt;template #default=&quot;&#123; data &#125;&quot;&gt;</span><br><span class="line">    	&lt;div&gt;&#123;&#123; data &#125;&#125;&lt;/div&gt;</span><br><span class="line">    &lt;/template&gt;</span><br><span class="line">    </span><br><span class="line">    &lt;template #footer&gt;</span><br><span class="line">    	&lt;div&gt;3&lt;/div&gt;</span><br><span class="line">    &lt;/template&gt;</span><br><span class="line">&lt;/Dialog&gt;</span><br></pre></td></tr></table></figure>
<h3 id="4-动态插槽"><a href="#4-动态插槽" class="headerlink" title="4 动态插槽"></a>4 动态插槽</h3><p>插槽可以是一个变量名</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;Dialog&gt;</span><br><span class="line">    &lt;template #[name]&gt;</span><br><span class="line">		&lt;div&gt;23&lt;/div&gt;</span><br><span class="line">    &lt;/template&gt;</span><br><span class="line">&lt;/Dialog&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> name = <span class="title function_">ref</span>(<span class="string">&#x27;header&#x27;</span>)</span><br></pre></td></tr></table></figure>
<h2 id="11、其他组件"><a href="#11、其他组件" class="headerlink" title="11、其他组件"></a>11、其他组件</h2><h3 id="1-异步组件"><a href="#1-异步组件" class="headerlink" title="1 异步组件"></a>1 异步组件</h3><p>在大型应用中，我们可能需要将应用分割成小一些的代码块 并且减少主包的体积，这时候就可以使用异步组件</p>
<p>顶层 await：在setup语法糖里面 使用方法</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;script setup&gt; 中可以使用顶层 await。结果代码会被编译成 async setup()</span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;script setup&gt;</span><br><span class="line">const post = await fetch(`/api/post/1`).then(r =&gt; r.json())</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h3 id="2-代码分包"><a href="#2-代码分包" class="headerlink" title="2 代码分包"></a>2 代码分包</h3><p>父组件引用子组件 通过defineAsyncComponent加载异步配合import 函数模式便可以分包</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;script setup lang=&quot;ts&quot;&gt;</span><br><span class="line">import &#123; reactive, ref, markRaw, toRaw, defineAsyncComponent &#125; from &#x27;vue&#x27;</span><br><span class="line">const Dialog = defineAsyncComponent(() =&gt; import(&#x27;../../components/Dialog/index.vue&#x27;))</span><br><span class="line"></span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h3 id="3-suspense"><a href="#3-suspense" class="headerlink" title="3 suspense"></a>3 suspense</h3><p>\<suspense> 组件有两个插槽。它们都只接收一个直接子节点。default 插槽里的节点会尽可能展示出来。如果不能，则展示 fallback 插槽里的节点。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"> &lt;Suspense&gt;</span><br><span class="line"> &lt;template #default&gt;</span><br><span class="line">     &lt;Dialog&gt;</span><br><span class="line">         &lt;template #default&gt;</span><br><span class="line">         	&lt;div&gt;我在哪儿&lt;/div&gt;</span><br><span class="line">         &lt;/template&gt;</span><br><span class="line">     &lt;/Dialog&gt;</span><br><span class="line"> &lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;template #fallback&gt;</span><br><span class="line">	&lt;div&gt;loading...&lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;/Suspense&gt;</span><br></pre></td></tr></table></figure>
<h3 id="4-teleport"><a href="#4-teleport" class="headerlink" title="4 teleport"></a>4 teleport</h3><blockquote>
<p>Teleport 是一种能够将我们的模板渲染至指定DOM节点，不受父级style、v-show等属性影响，但data、prop数据依旧能够共用的技术</p>
<p>主要解决的问题 因为Teleport节点挂载在其他指定的DOM节点下，完全不受父级style样式影响</p>
</blockquote>
<p><strong>使用方法：通过to 属性 插入指定元素位置 to=”body” 便可以将<code>Teleport</code> 内容传送到指定位置</strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">// 可以自定义传送位置 支持 class id等 选择器</span><br><span class="line">&lt;Teleport to=&quot;body&quot;&gt;</span><br><span class="line">    &lt;Loading&gt;&lt;/Loading&gt;</span><br><span class="line">&lt;/Teleport&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line"> </span><br><span class="line">    &lt;div class=&quot;dialog&quot;&gt;</span><br><span class="line">        &lt;header class=&quot;header&quot;&gt;</span><br><span class="line">            &lt;div&gt;我是弹框&lt;/div&gt;</span><br><span class="line">            &lt;el-icon&gt;</span><br><span class="line">                &lt;CloseBold /&gt;</span><br><span class="line">            &lt;/el-icon&gt;</span><br><span class="line">        &lt;/header&gt;</span><br><span class="line">        &lt;main class=&quot;main&quot;&gt;</span><br><span class="line">            我是内容12321321321</span><br><span class="line">        &lt;/main&gt;</span><br><span class="line">        &lt;footer class=&quot;footer&quot;&gt;</span><br><span class="line">            &lt;el-button size=&quot;small&quot;&gt;取消&lt;/el-button&gt;</span><br><span class="line">            &lt;el-button size=&quot;small&quot; type=&quot;primary&quot;&gt;确定&lt;/el-button&gt;</span><br><span class="line">        &lt;/footer&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line"> </span><br><span class="line">&lt;/template&gt;</span><br><span class="line"> </span><br><span class="line">&lt;script setup lang=&#x27;ts&#x27;&gt;</span><br><span class="line">import &#123; ref, reactive &#125; from &#x27;vue&#x27;</span><br><span class="line"> </span><br><span class="line">&lt;/script&gt;</span><br><span class="line">&lt;style lang=&quot;less&quot; scoped&gt;</span><br><span class="line">.dialog &#123;</span><br><span class="line">    width: 400px;</span><br><span class="line">    height: 400px;</span><br><span class="line">    background: #141414;</span><br><span class="line">    display: flex;</span><br><span class="line">    flex-direction: column;</span><br><span class="line">    position: absolute;</span><br><span class="line">    left: 50%;</span><br><span class="line">    top: 50%;</span><br><span class="line">    margin-left: -200px;</span><br><span class="line">    margin-top: -200px;</span><br><span class="line"> </span><br><span class="line">    .header &#123;</span><br><span class="line">        display: flex;</span><br><span class="line">        color: #CFD3DC;</span><br><span class="line">        border-bottom: 1px solid #636466;</span><br><span class="line">        padding: 10px;</span><br><span class="line">        justify-content: space-between;</span><br><span class="line">    &#125;</span><br><span class="line"> </span><br><span class="line">    .main &#123;</span><br><span class="line">        flex: 1;</span><br><span class="line">        color: #CFD3DC;</span><br><span class="line">        padding: 10px;</span><br><span class="line">    &#125;</span><br><span class="line"> </span><br><span class="line">    .footer &#123;</span><br><span class="line">        border-top: 1px solid #636466;</span><br><span class="line">        padding: 10px;</span><br><span class="line">        display: flex;</span><br><span class="line">        justify-content: flex-end;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
<p><strong>动态控制teleport</strong></p>
<p>使用disabled 设置为 true则 to属性不生效 false 则生效</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;teleport :disabled=&quot;true&quot; to=&#x27;body&#x27;&gt;</span><br><span class="line">    &lt;A&gt;&lt;/A&gt;</span><br><span class="line">&lt;/teleport&gt;</span><br></pre></td></tr></table></figure>
<h2 id="12、keep-alive"><a href="#12、keep-alive" class="headerlink" title="12、keep-alive"></a>12、keep-alive</h2><blockquote>
<p>有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就需要用到keep-alive组件。</p>
<p>开启keep-alive 生命周期的变化</p>
<ul>
<li>初次进入时： onMounted&gt; onActivated</li>
<li>退出后触发 deactivate</li>
<li>再次进入：只会触发 onActivated</li>
<li>事件挂载的方法等，只执行一次的放在 onMounted中；组件每次进去执行的方法放在 onActivated中</li>
</ul>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 基本 --&gt;</span><br><span class="line">&lt;keep-alive&gt;</span><br><span class="line">  &lt;component :is=&quot;view&quot;&gt;&lt;/component&gt;</span><br><span class="line">&lt;/keep-alive&gt;</span><br><span class="line"> </span><br><span class="line">&lt;!-- 多个条件判断的子组件 --&gt;</span><br><span class="line">&lt;keep-alive&gt;</span><br><span class="line">  &lt;comp-a v-if=&quot;a &gt; 1&quot;&gt;&lt;/comp-a&gt;</span><br><span class="line">  &lt;comp-b v-else&gt;&lt;/comp-b&gt;</span><br><span class="line">&lt;/keep-alive&gt;</span><br><span class="line"> </span><br><span class="line">&lt;!-- 和 `&lt;transition&gt;` 一起使用 --&gt;</span><br><span class="line">&lt;transition&gt;</span><br><span class="line">  &lt;keep-alive&gt;</span><br><span class="line">    &lt;component :is=&quot;view&quot;&gt;&lt;/component&gt;</span><br><span class="line">  &lt;/keep-alive&gt;</span><br><span class="line">&lt;/transition&gt;</span><br></pre></td></tr></table></figure>
<p><strong><code>include</code> 和 <code>exclude</code></strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">// include 和 exclude 允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示：</span><br><span class="line">&lt;keep-alive :include=&quot;&quot; :exclude=&quot;&quot; :max=&quot;&quot;&gt;&lt;/keep-alive&gt;</span><br></pre></td></tr></table></figure>
<p><strong><code>max</code></strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;keep-alive :max=&quot;10&quot;&gt;</span><br><span class="line">  &lt;component :is=&quot;view&quot;&gt;&lt;/component&gt;</span><br><span class="line">&lt;/keep-alive&gt;</span><br></pre></td></tr></table></figure>
<h2 id="13、transition-过渡"><a href="#13、transition-过渡" class="headerlink" title="13、transition 过渡"></a>13、transition 过渡</h2><blockquote>
<p>Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡:</p>
<ul>
<li>条件渲染 (使用 v-if)</li>
<li>条件展示 (使用 v-show)</li>
<li>动态组件</li>
<li>组件根节点</li>
<li>自定义 transition 过度效果，你需要对transition组件的name属性自定义。并在css中写入对应的样式</li>
</ul>
</blockquote>
<h3 id="1-过渡的类名"><a href="#1-过渡的类名" class="headerlink" title="1.过渡的类名"></a>1.过渡的类名</h3><p>在进入/离开的过渡中，会有 6 个 class 切换。</p>
<p>#过渡 class<br>在进入/离开的过渡中，会有 6 个 class 切换。</p>
<p>v-enter-from：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。</p>
<p>v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。</p>
<p>v-enter-to：定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter-from 被移除)，在过渡/动画完成之后移除。</p>
<p>v-leave-from：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。</p>
<p>v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。</p>
<p>v-leave-to：离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave-from 被移除)，在过渡/动画完成之后移除。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;button @click=&#x27;flag = !flag&#x27;&gt;切换&lt;/button&gt;</span><br><span class="line">&lt;transition name=&#x27;fade&#x27;&gt;</span><br><span class="line">    &lt;div v-if=&#x27;flag&#x27; class=&quot;box&quot;&gt;&lt;/div&gt;</span><br><span class="line">&lt;/transition&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line">//开始过度</span><br><span class="line"><span class="selector-class">.fade-enter-from</span>&#123;</span><br><span class="line">   <span class="attribute">background</span>:red;</span><br><span class="line">   <span class="attribute">width</span>:<span class="number">0px</span>;</span><br><span class="line">   <span class="attribute">height</span>:<span class="number">0px</span>;</span><br><span class="line">   <span class="attribute">transform</span>:<span class="built_in">rotate</span>(<span class="number">360deg</span>)</span><br><span class="line">&#125;</span><br><span class="line">//开始过度了</span><br><span class="line"><span class="selector-class">.fade-enter-active</span>&#123;</span><br><span class="line">  <span class="attribute">transition</span>: all <span class="number">2.5s</span> linear;</span><br><span class="line">&#125;</span><br><span class="line">//过度完成</span><br><span class="line"><span class="selector-class">.fade-enter-to</span>&#123;</span><br><span class="line">   <span class="attribute">background</span>:yellow;</span><br><span class="line">   <span class="attribute">width</span>:<span class="number">200px</span>;</span><br><span class="line">   <span class="attribute">height</span>:<span class="number">200px</span>;</span><br><span class="line">&#125;</span><br><span class="line">//离开的过度</span><br><span class="line"><span class="selector-class">.fade-leave-from</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>:<span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>:<span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">transform</span>:<span class="built_in">rotate</span>(<span class="number">360deg</span>)</span><br><span class="line">&#125;</span><br><span class="line">//离开中过度</span><br><span class="line"><span class="selector-class">.fade-leave-active</span>&#123;</span><br><span class="line">  <span class="attribute">transition</span>: all <span class="number">1s</span> linear;</span><br><span class="line">&#125;</span><br><span class="line">//离开完成</span><br><span class="line"><span class="selector-class">.fade-leave-to</span>&#123;</span><br><span class="line">  <span class="attribute">width</span>:<span class="number">0px</span>;</span><br><span class="line">   <span class="attribute">height</span>:<span class="number">0px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="2-自定义过渡-class-类名"><a href="#2-自定义过渡-class-类名" class="headerlink" title="2.自定义过渡 class 类名"></a>2.自定义过渡 class 类名</h3><blockquote>
<p>rasnsition props</p>
<ul>
<li>enter-from-class</li>
<li>enter-active-class</li>
<li>enter-to-class</li>
<li>leave-from-class</li>
<li>leave-active-class</li>
<li>leave-to-class</li>
</ul>
</blockquote>
<p>自定义过度时间 单位毫秒你也可以分别指定进入和离开的持续时间：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;transition :duration=&quot;1000&quot;&gt;...&lt;/transition&gt;</span><br><span class="line">&lt;transition :duration=&quot;&#123; enter: 500, leave: 800 &#125;&quot;&gt;...&lt;/transition&gt;</span><br></pre></td></tr></table></figure>
<h3 id="3-结合css动画库"><a href="#3-结合css动画库" class="headerlink" title="3 结合css动画库"></a>3 结合css动画库</h3><p>3.1 安装库 npm install animate.css</p>
<p>3.2 引入 import ‘animate.css’</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;transition</span><br><span class="line">            leave-active-class=&quot;animate__animated animate__bounceInLeft&quot;</span><br><span class="line">            enter-active-class=&quot;animate__animated animate__bounceInRight&quot;</span><br><span class="line">            &gt;</span><br><span class="line">    &lt;div v-if=&quot;flag&quot; class=&quot;box&quot;&gt;&lt;/div&gt;</span><br><span class="line">&lt;/transition&gt;</span><br></pre></td></tr></table></figure>
<h3 id="4-transition-生命周期"><a href="#4-transition-生命周期" class="headerlink" title="4 .transition 生命周期"></a>4 .transition 生命周期</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">@before-enter=&quot;beforeEnter&quot; //对应enter-from</span><br><span class="line">@enter=&quot;enter&quot;//对应enter-active</span><br><span class="line">@after-enter=&quot;afterEnter&quot;//对应enter-to</span><br><span class="line">@enter-cancelled=&quot;enterCancelled&quot;//显示过度打断</span><br><span class="line">@before-leave=&quot;beforeLeave&quot;//对应leave-from</span><br><span class="line">@leave=&quot;leave&quot;//对应enter-active</span><br><span class="line">@after-leave=&quot;afterLeave&quot;//对应leave-to</span><br><span class="line">@leave-cancelled=&quot;leaveCancelled&quot;//离开过度打断</span><br></pre></td></tr></table></figure>
<blockquote>
<p>当只用 JavaScript 过渡的时候，在 <strong><code>enter</code> 和 <code>leave</code> 钩子中必须使用 <code>done</code> 进行回调</strong></p>
</blockquote>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title function_">beforeEnter</span> = (<span class="params">el: Element</span>) =&gt; &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;进入之前from&#x27;</span>, el);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> <span class="title function_">Enter</span> = (<span class="params">el: Element,done:<span class="built_in">Function</span></span>) =&gt; &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;过度曲线&#x27;</span>);</span><br><span class="line">    <span class="built_in">setTimeout</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">       <span class="title function_">done</span>()</span><br><span class="line">    &#125;,<span class="number">3000</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> <span class="title function_">AfterEnter</span> = (<span class="params">el: Element</span>) =&gt; &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;to&#x27;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="5-appear"><a href="#5-appear" class="headerlink" title="5 appear"></a>5 appear</h3><p>通过这个属性可以设置初始节点过度 就是页面加载完成就开始动画 对应三个状态</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">appear-active-class=&quot;&quot;</span><br><span class="line">appear-from-class=&quot;&quot;</span><br><span class="line">appear-to-class=&quot;&quot;</span><br><span class="line">appear</span><br></pre></td></tr></table></figure>
<h2 id="14、transition-group"><a href="#14、transition-group" class="headerlink" title="14、transition-group"></a>14、transition-group</h2><h3 id="1-关于transition-group"><a href="#1-关于transition-group" class="headerlink" title="1 关于transition-group"></a>1 关于transition-group</h3><blockquote>
<ul>
<li>默认情况下，它不会渲染一个包裹元素，但是你可以通过 <code>tag</code> attribute 指定渲染一个元素。</li>
<li><a target="_blank" rel="noopener" href="https://v3.cn.vuejs.org/guide/transitions-enterleave.html#过渡模式">过渡模式</a>不可用，因为我们不再相互切换特有的元素。</li>
<li>内部元素<strong>总是需要</strong>提供唯一的 <code>key</code> attribute 值。</li>
<li>CSS 过渡的类将会应用在内部的元素中，而不是这个组/容器本身。</li>
</ul>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;transition-group&gt;</span><br><span class="line">     &lt;div style=&quot;margin: 10px;&quot; :key=&quot;item&quot; v-for=&quot;item in list&quot;&gt;&#123;&#123; item &#125;&lt;/div&gt;</span><br><span class="line">&lt;/transition-group&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> list = reactive&lt;<span class="built_in">number</span>[]&gt;([<span class="number">1</span>, <span class="number">2</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="number">7</span>, <span class="number">8</span>, <span class="number">9</span>])</span><br><span class="line"><span class="keyword">const</span> <span class="title function_">Push</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">    list.<span class="title function_">push</span>(<span class="number">123</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> <span class="title function_">Pop</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">    list.<span class="title function_">pop</span>()</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="2-列表的移动过渡"><a href="#2-列表的移动过渡" class="headerlink" title="2.列表的移动过渡"></a>2.列表的移动过渡</h3><blockquote>
<p>\<transition-group> 组件还有一个特殊之处。除了进入和离开，它还可以为定位的改变添加动画。只需了解新增的 v-move 类就可以使用这个新功能，它会应用在元素改变定位的过程中。像之前的类名一样，它的前缀可以通过 name attribute 来自定义，也可以通过 move-class attribute 手动设置</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">        &lt;button @click=&quot;shuffle&quot;&gt;Shuffle&lt;/button&gt;</span><br><span class="line">        &lt;transition-group class=&quot;wraps&quot; name=&quot;mmm&quot; tag=&quot;ul&quot;&gt;</span><br><span class="line">            &lt;li class=&quot;cell&quot; v-for=&quot;item in items&quot; :key=&quot;item.id&quot;&gt;&#123;&#123; item.number &#125;&#125;&lt;/li&gt;</span><br><span class="line">        &lt;/transition-group&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">  </span><br><span class="line">&lt;script setup  lang=&#x27;ts&#x27;&gt;</span><br><span class="line">import _ from &#x27;lodash&#x27;</span><br><span class="line">import &#123; ref &#125; from &#x27;vue&#x27;</span><br><span class="line">let items = ref(Array.apply(null, &#123; length: 81 &#125; as number[]).map((_, index) =&gt; &#123;</span><br><span class="line">    return &#123;</span><br><span class="line">        id: index,</span><br><span class="line">        number: (index % 9) + 1</span><br><span class="line">    &#125;</span><br><span class="line">&#125;))</span><br><span class="line">const shuffle = () =&gt; &#123;</span><br><span class="line">    items.value = _.shuffle(items.value)</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line">  </span><br><span class="line">&lt;style scoped lang=&quot;less&quot;&gt;</span><br><span class="line">.wraps &#123;</span><br><span class="line">    display: flex;</span><br><span class="line">    flex-wrap: wrap;</span><br><span class="line">    width: calc(25px * 10 + 9px);</span><br><span class="line">    .cell &#123;</span><br><span class="line">        width: 25px;</span><br><span class="line">        height: 25px;</span><br><span class="line">        border: 1px solid #ccc;</span><br><span class="line">        list-style-type: none;</span><br><span class="line">        display: flex;</span><br><span class="line">        justify-content: center;</span><br><span class="line">        align-items: center;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line">.mmm-move &#123;</span><br><span class="line">    transition: transform 0.8s ease;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
<h3 id="3-状态过渡"><a href="#3-状态过渡" class="headerlink" title="3.状态过渡"></a>3.状态过渡</h3><p>Vue 也同样可以给数字 Svg 背景颜色等添加过度动画 演示数字变化</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">        &lt;input step=&quot;20&quot; v-model=&quot;num.current&quot; type=&quot;number&quot; /&gt;</span><br><span class="line">        &lt;div&gt;&#123;&#123; num.tweenedNumber.toFixed(0) &#125;&#125;&lt;/div&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">    </span><br><span class="line">&lt;script setup lang=&#x27;ts&#x27;&gt;</span><br><span class="line">import &#123; reactive, watch &#125; from &#x27;vue&#x27;</span><br><span class="line">import gsap from &#x27;gsap&#x27;</span><br><span class="line">const num = reactive(&#123;</span><br><span class="line">    tweenedNumber: 0,</span><br><span class="line">    current:0</span><br><span class="line">&#125;)</span><br><span class="line"> </span><br><span class="line">watch(()=&gt;num.current, (newVal) =&gt; &#123;</span><br><span class="line">    gsap.to(num, &#123;</span><br><span class="line">        duration: 1,</span><br><span class="line">        tweenedNumber: newVal</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;)</span><br><span class="line"> </span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h2 id="15、依赖注入Provide-Inject"><a href="#15、依赖注入Provide-Inject" class="headerlink" title="15、依赖注入Provide / Inject"></a>15、依赖注入Provide / Inject</h2><blockquote>
<p>如果传递普通的值 是不具有响应式的 需要通过ref reactive 添加响应式</p>
</blockquote>
<p>父组件传递数据</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">    &lt;div class=&quot;App&quot;&gt;</span><br><span class="line">        &lt;button&gt;我是App&lt;/button&gt;</span><br><span class="line">        &lt;A&gt;&lt;/A&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">    </span><br><span class="line">&lt;script setup lang=&#x27;ts&#x27;&gt;</span><br><span class="line">import &#123; provide, ref &#125; from &#x27;vue&#x27;</span><br><span class="line">import A from &#x27;./components/A.vue&#x27;</span><br><span class="line">let flag = ref&lt;number&gt;(1)</span><br><span class="line">provide(&#x27;flag&#x27;, flag)</span><br><span class="line">&lt;/script&gt;</span><br><span class="line">    </span><br><span class="line">&lt;style&gt;</span><br><span class="line">.App &#123;</span><br><span class="line">    background: blue;</span><br><span class="line">    color: #fff;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
<p>子组件接受</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">    &lt;div style=&quot;background-color: green;&quot;&gt;</span><br><span class="line">        我是B</span><br><span class="line">        &lt;button @click=&quot;change&quot;&gt;change falg&lt;/button&gt;</span><br><span class="line">        &lt;div&gt;&#123;&#123; flag &#125;&#125;&lt;/div&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">    </span><br><span class="line">&lt;script setup lang=&#x27;ts&#x27;&gt;</span><br><span class="line">import &#123; inject, Ref, ref &#125; from &#x27;vue&#x27;</span><br><span class="line"> </span><br><span class="line">const flag = inject&lt;Ref&lt;number&gt;&gt;(&#x27;flag&#x27;, ref(1))</span><br><span class="line"> </span><br><span class="line">const change = () =&gt; &#123;</span><br><span class="line">    flag.value = 2</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line">    </span><br><span class="line">&lt;style&gt;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
<h2 id="16、v-model"><a href="#16、v-model" class="headerlink" title="16、v-model"></a>16、v-model</h2><blockquote>
<p>v-model 其实是一个语法糖 通过props 和 emit组合而成的</p>
<p>默认值的改变</p>
<ul>
<li>prop：value -&gt; modelValue；</li>
<li>事件：input -&gt; update\:modelValue；</li>
<li>v-bind 的 .sync 修饰符和组件的 model 选项已移除</li>
<li>新增 支持多个v-model</li>
<li>新增 支持自定义 修饰符</li>
</ul>
</blockquote>
<h3 id="1-绑定单个"><a href="#1-绑定单个" class="headerlink" title="1 绑定单个"></a>1 绑定单个</h3><p>子组件</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">     &lt;div v-if=&#x27;propData.modelValue &#x27; class=&quot;dialog&quot;&gt;</span><br><span class="line">         &lt;div class=&quot;dialog-header&quot;&gt;</span><br><span class="line">             &lt;div&gt;标题&lt;/div&gt;&lt;div @click=&quot;close&quot;&gt;x&lt;/div&gt;</span><br><span class="line">         &lt;/div&gt;</span><br><span class="line">         &lt;div class=&quot;dialog-content&quot;&gt;</span><br><span class="line">            内容</span><br><span class="line">         &lt;/div&gt;</span><br><span class="line">         </span><br><span class="line">     &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"> </span><br><span class="line">&lt;script setup lang=&#x27;ts&#x27;&gt;</span><br><span class="line"> </span><br><span class="line">type Props = &#123;</span><br><span class="line">   modelValue:boolean</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line">const propData = defineProps&lt;Props&gt;()</span><br><span class="line"> </span><br><span class="line">const emit = defineEmits([&#x27;update:modelValue&#x27;])</span><br><span class="line"> </span><br><span class="line">const close = () =&gt; &#123;</span><br><span class="line">     emit(&#x27;update:modelValue&#x27;,false)</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line">&lt;/script&gt;</span><br><span class="line"> </span><br><span class="line">&lt;style lang=&#x27;less&#x27;&gt;</span><br><span class="line">.dialog&#123;</span><br><span class="line">    width: 300px;</span><br><span class="line">    height: 300px;</span><br><span class="line">    border: 1px solid #ccc;</span><br><span class="line">    position: fixed;</span><br><span class="line">    left:50%;</span><br><span class="line">    top:50%;</span><br><span class="line">    transform: translate(-50%,-50%);</span><br><span class="line">    &amp;-header&#123;</span><br><span class="line">        border-bottom: 1px solid #ccc;</span><br><span class="line">        display: flex;</span><br><span class="line">        justify-content: space-between;</span><br><span class="line">        padding: 10px;</span><br><span class="line">    &#125;</span><br><span class="line">    &amp;-content&#123;</span><br><span class="line">        padding: 10px;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
<p>父组件</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;button @click=&quot;show = !show&quot;&gt;开关&#123;&#123;show&#125;&#125;&lt;/button&gt;</span><br><span class="line">  &lt;Dialog v-model=&quot;show&quot;&gt;&lt;/Dialog&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"> </span><br><span class="line">&lt;script setup lang=&#x27;ts&#x27;&gt;</span><br><span class="line">import Dialog from &quot;./components/Dialog/index.vue&quot;;</span><br><span class="line">import &#123;ref&#125; from &#x27;vue&#x27;</span><br><span class="line">const show = ref(false)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h3 id="2-绑定多个"><a href="#2-绑定多个" class="headerlink" title="2 绑定多个"></a>2 绑定多个</h3><p>子组件</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">     &lt;div v-if=&#x27;modelValue &#x27; class=&quot;dialog&quot;&gt;</span><br><span class="line">         &lt;div class=&quot;dialog-header&quot;&gt;</span><br><span class="line">             &lt;div&gt;标题---&#123;&#123;title&#125;&#125;&lt;/div&gt;&lt;div @click=&quot;close&quot;&gt;x&lt;/div&gt;</span><br><span class="line">         &lt;/div&gt;</span><br><span class="line">         &lt;div class=&quot;dialog-content&quot;&gt;</span><br><span class="line">            内容</span><br><span class="line">         &lt;/div&gt;</span><br><span class="line">         </span><br><span class="line">     &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"> </span><br><span class="line">&lt;script setup lang=&#x27;ts&#x27;&gt;</span><br><span class="line">type Props = &#123;</span><br><span class="line">   modelValue:boolean,</span><br><span class="line">   title:string</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line">const propData = defineProps&lt;Props&gt;()</span><br><span class="line">const emit = defineEmits([&#x27;update:modelValue&#x27;,&#x27;update:title&#x27;])</span><br><span class="line">const close = () =&gt; &#123;</span><br><span class="line">     emit(&#x27;update:modelValue&#x27;,false)</span><br><span class="line">     emit(&#x27;update:title&#x27;,&#x27;我要改变&#x27;)</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"> </span><br><span class="line">&lt;style lang=&#x27;less&#x27;&gt;</span><br><span class="line">.dialog&#123;</span><br><span class="line">    width: 300px;</span><br><span class="line">    height: 300px;</span><br><span class="line">    border: 1px solid #ccc;</span><br><span class="line">    position: fixed;</span><br><span class="line">    left:50%;</span><br><span class="line">    top:50%;</span><br><span class="line">    transform: translate(-50%,-50%);</span><br><span class="line">    &amp;-header&#123;</span><br><span class="line">        border-bottom: 1px solid #ccc;</span><br><span class="line">        display: flex;</span><br><span class="line">        justify-content: space-between;</span><br><span class="line">        padding: 10px;</span><br><span class="line">    &#125;</span><br><span class="line">    &amp;-content&#123;</span><br><span class="line">        padding: 10px;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
<p>父组件</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;button @click=&quot;show = !show&quot;&gt;开关&#123;&#123;show&#125;&#125; ----- &#123;&#123;title&#125;&#125;&lt;/button&gt;</span><br><span class="line">  &lt;Dialog v-model:title=&#x27;title&#x27; v-model=&quot;show&quot;&gt;&lt;/Dialog&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"> </span><br><span class="line">&lt;script setup lang=&#x27;ts&#x27;&gt;</span><br><span class="line">import Dialog from &quot;./components/Dialog/index.vue&quot;;</span><br><span class="line">import &#123;ref&#125; from &#x27;vue&#x27;</span><br><span class="line">const show = ref(false)</span><br><span class="line">const title = ref(&#x27;我是标题&#x27;)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h3 id="3-自定义修饰符"><a href="#3-自定义修饰符" class="headerlink" title="3 自定义修饰符"></a>3 自定义修饰符</h3><blockquote>
<p>添加到组件 <code>v-model</code> 的修饰符将通过 <code>modelModifiers</code> prop 提供给组件。在下面的示例中，我们创建了一个组件，其中包含默认为空对象的 <code>modelModifiers</code> prop</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&lt;script setup lang=&#x27;ts&#x27;&gt;</span><br><span class="line">type Props = &#123;</span><br><span class="line">    modelValue: boolean,</span><br><span class="line">    title?: string,</span><br><span class="line">    modelModifiers?: &#123;</span><br><span class="line">        default: () =&gt; &#123;&#125;</span><br><span class="line">    &#125;</span><br><span class="line">    titleModifiers?: &#123;</span><br><span class="line">        default: () =&gt; &#123;&#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line">const propData = defineProps&lt;Props&gt;()</span><br><span class="line">const emit = defineEmits([&#x27;update:modelValue&#x27;, &#x27;update:title&#x27;])</span><br><span class="line"></span><br><span class="line">const close = () =&gt; &#123;</span><br><span class="line">    console.log(propData.modelModifiers);</span><br><span class="line">    emit(&#x27;update:modelValue&#x27;, false)</span><br><span class="line">    emit(&#x27;update:title&#x27;, &#x27;我要改变&#x27;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="17、directive指令"><a href="#17、directive指令" class="headerlink" title="17、directive指令"></a>17、directive指令</h2><h3 id="1-Vue3指令的钩子函数"><a href="#1-Vue3指令的钩子函数" class="headerlink" title="1.Vue3指令的钩子函数"></a>1.Vue3指令的钩子函数</h3><ul>
<li><p>created 元素初始化的时候</p>
</li>
<li><p>beforeMount 指令绑定到元素后调用 只调用一次</p>
</li>
<li><p>mounted 元素插入父级dom调用</p>
</li>
<li><p>beforeUpdate 元素被更新之前调用</p>
</li>
<li><p>update 这个周期方法被移除 改用updated</p>
</li>
<li><p>beforeUnmount 在元素被移除前调用</p>
</li>
<li><p>unmounted 指令被移除后调用 只调用一次</p>
</li>
</ul>
<h3 id="2-在setup内定义局部指令"><a href="#2-在setup内定义局部指令" class="headerlink" title="2.在setup内定义局部指令"></a>2.在setup内定义局部指令</h3><blockquote>
<p>需要注意的限制：必须以 <code>vNameOfDirective</code> 的形式来命名本地自定义指令，以使得它们可以直接在模板中使用</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;button @click=&quot;show = !show&quot;&gt;开关&#123;&#123;show&#125;&#125; ----- &#123;&#123;title&#125;&#125;&lt;/button&gt;</span><br><span class="line">  &lt;Dialog  v-move-directive=&quot;&#123;background:&#x27;green&#x27;,flag:show&#125;&quot;&gt;&lt;/Dialog&gt;</span><br><span class="line">&lt;/template&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"> <span class="keyword">const</span> <span class="attr">vMoveDirective</span>: <span class="title class_">Directive</span> = &#123;</span><br><span class="line">  <span class="attr">created</span>: <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;初始化====&gt;&quot;</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="title function_">beforeMount</span>(<span class="params">...args: <span class="built_in">Array</span>&lt;<span class="built_in">any</span>&gt;</span>) &#123;</span><br><span class="line">    <span class="comment">// 在元素上做些操作</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;初始化一次=======&gt;&quot;</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="title function_">mounted</span>(<span class="params">el: <span class="built_in">any</span>, dir: DirectiveBinding&lt;Value&gt;</span>) &#123;</span><br><span class="line">    el.<span class="property">style</span>.<span class="property">background</span> = dir.<span class="property">value</span>.<span class="property">background</span>;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;初始化========&gt;&quot;</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="title function_">beforeUpdate</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;更新之前&quot;</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="title function_">updated</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;更新结束&quot;</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="title function_">beforeUnmount</span>(<span class="params">...args: <span class="built_in">Array</span>&lt;<span class="built_in">any</span>&gt;</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(args);</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;======&gt;卸载之前&quot;</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="title function_">unmounted</span>(<span class="params">...args: <span class="built_in">Array</span>&lt;<span class="built_in">any</span>&gt;</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(args);</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;======&gt;卸载完成&quot;</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<h3 id="3-生命周期钩子参数详解"><a href="#3-生命周期钩子参数详解" class="headerlink" title="3.生命周期钩子参数详解"></a>3.生命周期钩子参数详解</h3><p>第一个 el  当前绑定的DOM 元素</p>
<p>第二个 binding</p>
<p>​    instance：使用指令的组件实例。<br>​    value：传递给指令的值。例如，在 v-my-directive=”1 + 1” 中，该值为 2。<br>​    oldValue：先前的值，仅在 beforeUpdate 和 updated 中可用。无论值是否有更改都可用。<br>​    arg：传递给指令的参数(如果有的话)。例如在 v-my-directive\:foo 中，arg 为 “foo”。<br>​    modifiers：包含修饰符(如果有的话) 的对象。例如在 v-my-directive.foo.bar 中，修饰符对象为 {foo: true，bar: true}。<br>​    dir：一个对象，在注册指令时作为参数传递。例如，在以下指令中</p>
<p>第三个 当前元素的虚拟DOM 也就是Vnode</p>
<p>第四个 prevNode 上一个虚拟节点，仅在 beforeUpdate 和 updated 钩子中可用</p>
<h3 id="4-函数简写"><a href="#4-函数简写" class="headerlink" title="4.函数简写"></a>4.函数简写</h3><blockquote>
<p>想在 <code>mounted</code> 和 <code>updated</code> 时触发相同行为，而不关心其他的钩子函数。那么你可以通过将这个函数模式实现</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">   &lt;div&gt;</span><br><span class="line">      &lt;input v-model=&quot;value&quot; type=&quot;text&quot; /&gt;</span><br><span class="line">      &lt;A v-move=&quot;&#123; background: value &#125;&quot;&gt;&lt;/A&gt;</span><br><span class="line">   &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">   </span><br><span class="line">&lt;script setup lang=&#x27;ts&#x27;&gt;</span><br><span class="line">import A from &#x27;./components/A.vue&#x27;</span><br><span class="line">import &#123; ref, Directive, DirectiveBinding &#125; from &#x27;vue&#x27;</span><br><span class="line">let value = ref&lt;string&gt;(&#x27;&#x27;)</span><br><span class="line">type Dir = &#123;</span><br><span class="line">   background: string</span><br><span class="line">&#125;</span><br><span class="line">const vMove: Directive = (el, binding: DirectiveBinding&lt;Dir&gt;) =&gt; &#123;</span><br><span class="line">   el.style.background = binding.value.background</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<p>案例自定义拖拽指令</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div v-move class=&quot;box&quot;&gt;</span><br><span class="line">    &lt;div class=&quot;header&quot;&gt;&lt;/div&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      内容</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"> </span><br><span class="line">&lt;script setup lang=&#x27;ts&#x27;&gt;</span><br><span class="line">import &#123; Directive &#125; from &quot;vue&quot;;</span><br><span class="line">const vMove: Directive = &#123;</span><br><span class="line">  mounted(el: HTMLElement) &#123;</span><br><span class="line">    let moveEl = el.firstElementChild as HTMLElement;</span><br><span class="line">    const mouseDown = (e: MouseEvent) =&gt; &#123;</span><br><span class="line">      //鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离</span><br><span class="line">      console.log(e.clientX, e.clientY, &quot;-----起始&quot;, el.offsetLeft);</span><br><span class="line">      let X = e.clientX - el.offsetLeft;</span><br><span class="line">      let Y = e.clientY - el.offsetTop;</span><br><span class="line">      const move = (e: MouseEvent) =&gt; &#123;</span><br><span class="line">        el.style.left = e.clientX - X + &quot;px&quot;;</span><br><span class="line">        el.style.top = e.clientY - Y + &quot;px&quot;;</span><br><span class="line">        console.log(e.clientX, e.clientY, &quot;---改变&quot;);</span><br><span class="line">      &#125;;</span><br><span class="line">      document.addEventListener(&quot;mousemove&quot;, move);</span><br><span class="line">      document.addEventListener(&quot;mouseup&quot;, () =&gt; &#123;</span><br><span class="line">        document.removeEventListener(&quot;mousemove&quot;, move);</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;;</span><br><span class="line">    moveEl.addEventListener(&quot;mousedown&quot;, mouseDown);</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"> </span><br><span class="line">&lt;style lang=&#x27;less&#x27;&gt;</span><br><span class="line">.box &#123;</span><br><span class="line">  position: fixed;</span><br><span class="line">  left: 50%;</span><br><span class="line">  top: 50%;</span><br><span class="line">  transform: translate(-50%, -50%);</span><br><span class="line">  width: 200px;</span><br><span class="line">  height: 200px;</span><br><span class="line">  border: 1px solid #ccc;</span><br><span class="line">  .header &#123;</span><br><span class="line">    height: 20px;</span><br><span class="line">    background: black;</span><br><span class="line">    cursor: move;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
<h2 id="18、Hook"><a href="#18、Hook" class="headerlink" title="18、Hook"></a>18、Hook</h2><blockquote>
<p>用来处理复用代码逻辑的一些封装</p>
<p>Vue3 的自定义的hook</p>
<ul>
<li>Vue3 的 hook函数 相当于 vue2 的 mixin, 不同在与 hooks 是函数</li>
<li>Vue3 的 hook函数 可以帮助我们提高代码的复用性, 让我们能在不同的组件中都利用 hooks 函数</li>
</ul>
</blockquote>
<p>Vue3 hook 库<a target="_blank" rel="noopener" href="https://vueuse.org/guide/">Get Started | VueUse</a></p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; onMounted &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> <span class="title class_">Options</span> = &#123;</span><br><span class="line">    <span class="attr">el</span>: <span class="built_in">string</span></span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="keyword">type</span> <span class="title class_">Return</span> = &#123;</span><br><span class="line">    <span class="title class_">Baseurl</span>: <span class="built_in">string</span> | <span class="literal">null</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">function</span> (<span class="params">option: Options</span>): <span class="title class_">Promise</span>&lt;<span class="title class_">Return</span>&gt; &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="title function_">onMounted</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">            <span class="keyword">const</span> <span class="attr">file</span>: <span class="title class_">HTMLImageElement</span> = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(option.<span class="property">el</span>) <span class="keyword">as</span> <span class="title class_">HTMLImageElement</span>;</span><br><span class="line">            file.<span class="property">onload</span> = ():<span class="function"><span class="params">void</span> =&gt;</span> &#123;</span><br><span class="line">                <span class="title function_">resolve</span>(&#123;</span><br><span class="line">                    <span class="title class_">Baseurl</span>: <span class="title function_">toBase64</span>(file)</span><br><span class="line">                &#125;)</span><br><span class="line">            &#125;</span><br><span class="line"> </span><br><span class="line">        &#125;)</span><br><span class="line">        <span class="keyword">const</span> toBase64 = (<span class="attr">el</span>: <span class="title class_">HTMLImageElement</span>): <span class="function"><span class="params">string</span> =&gt;</span> &#123;</span><br><span class="line">            <span class="keyword">const</span> <span class="attr">canvas</span>: <span class="title class_">HTMLCanvasElement</span> = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&#x27;canvas&#x27;</span>)</span><br><span class="line">            <span class="keyword">const</span> ctx = canvas.<span class="title function_">getContext</span>(<span class="string">&#x27;2d&#x27;</span>) <span class="keyword">as</span> <span class="title class_">CanvasRenderingContext2D</span></span><br><span class="line">            canvas.<span class="property">width</span> = el.<span class="property">width</span></span><br><span class="line">            canvas.<span class="property">height</span> = el.<span class="property">height</span></span><br><span class="line">            ctx.<span class="title function_">drawImage</span>(el, <span class="number">0</span>, <span class="number">0</span>, canvas.<span class="property">width</span>,canvas.<span class="property">height</span>)</span><br><span class="line">            <span class="variable language_">console</span>.<span class="title function_">log</span>(el.<span class="property">width</span>);</span><br><span class="line">            <span class="keyword">return</span> canvas.<span class="title function_">toDataURL</span>(<span class="string">&#x27;image/png&#x27;</span>)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="19、全局函数和变量"><a href="#19、全局函数和变量" class="headerlink" title="19、全局函数和变量"></a>19、全局函数和变量</h2><h3 id="1-globalProperties"><a href="#1-globalProperties" class="headerlink" title="1 globalProperties"></a>1 globalProperties</h3><p>由于Vue3 没有Prototype 属性 使用 app.config.globalProperties 代替 然后去定义变量和函数</p>
<p>Vue2</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 之前 (Vue 2.x)</span></span><br><span class="line"><span class="title class_">Vue</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">$http</span> = <span class="function">() =&gt;</span> &#123;&#125;</span><br></pre></td></tr></table></figure>
<p>Vue3</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 之后 (Vue 3.x)</span></span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">createApp</span>(&#123;&#125;)</span><br><span class="line">app.<span class="property">config</span>.<span class="property">globalProperties</span>.<span class="property">$http</span> = <span class="function">() =&gt;</span> &#123;&#125;</span><br></pre></td></tr></table></figure>
<h3 id="2-过滤器Filter"><a href="#2-过滤器Filter" class="headerlink" title="2 过滤器Filter"></a>2 过滤器Filter</h3><blockquote>
<p>在Vue3 移除了，可以使用全局函数代替Filters</p>
</blockquote>
<p>案例</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">app.<span class="property">config</span>.<span class="property">globalProperties</span>.<span class="property">$filters</span> = &#123;</span><br><span class="line">  format&lt;T <span class="keyword">extends</span> <span class="built_in">any</span>&gt;(<span class="attr">str</span>: T): <span class="built_in">string</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">`$<span class="subst">$&#123;str&#125;</span>`</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>声明文件 不然TS无法正确类型 推导</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> <span class="title class_">Filter</span> = &#123;</span><br><span class="line">    <span class="attr">format</span>: &lt;T <span class="keyword">extends</span> <span class="built_in">any</span>&gt;<span class="function">(<span class="params">str: T</span>) =&gt;</span> T</span><br><span class="line">  &#125;</span><br><span class="line"><span class="comment">// 声明要扩充@vue/runtime-core包的声明.</span></span><br><span class="line"><span class="comment">// 这里扩充&quot;ComponentCustomProperties&quot;接口, 因为他是vue3中实例的属性的类型.</span></span><br><span class="line">  <span class="keyword">declare</span> <span class="variable language_">module</span> <span class="string">&#x27;@vue/runtime-core&#x27;</span> &#123;</span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">interface</span> <span class="title class_">ComponentCustomProperties</span> &#123;</span><br><span class="line">        <span class="attr">$filters</span>: <span class="title class_">Filter</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>
<p>setup 读取值</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">import &#123; getCurrentInstance, ComponentInternalInstance &#125; from &#x27;vue&#x27;;</span><br><span class="line">const &#123; appContext &#125; = &lt;ComponentInternalInstance&gt;getCurrentInstance()</span><br><span class="line">console.log(appContext.config.globalProperties.$env);</span><br></pre></td></tr></table></figure>
<h2 id="20、Vue3插件"><a href="#20、Vue3插件" class="headerlink" title="20、Vue3插件"></a>20、Vue3插件</h2><blockquote>
<p>插件是自包含的代码，通常向 Vue 添加全局级功能。你如果是一个对象需要有install方法Vue会帮你自动注入到install 方法 你如果是function 就直接当install 方法去使用</p>
<p>使用插件：</p>
<p>​    在使用 <code>createApp()</code> 初始化 Vue 应用程序后，你可以通过调用 <code>use()</code> 方法将插件添加到你的应用程序中。</p>
</blockquote>
<p>示例：实现一个Loading</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">    &lt;div v-if=&quot;isShow&quot; class=&quot;loading&quot;&gt;</span><br><span class="line">        &lt;div class=&quot;loading-content&quot;&gt;Loading...&lt;/div&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">    </span><br><span class="line">&lt;script setup lang=&#x27;ts&#x27;&gt;</span><br><span class="line">import &#123; ref &#125; from &#x27;vue&#x27;;</span><br><span class="line">const isShow = ref(false)//定位loading 的开关</span><br><span class="line"> </span><br><span class="line">const show = () =&gt; &#123;</span><br><span class="line">    isShow.value = true</span><br><span class="line">&#125;</span><br><span class="line">const hide = () =&gt; &#123;</span><br><span class="line">    isShow.value = false</span><br><span class="line">&#125;</span><br><span class="line">//对外暴露 当前组件的属性和方法</span><br><span class="line">defineExpose(&#123;</span><br><span class="line">    isShow,</span><br><span class="line">    show,</span><br><span class="line">    hide</span><br><span class="line">&#125;)</span><br><span class="line">&lt;/script&gt;</span><br><span class="line">  </span><br><span class="line">&lt;style scoped lang=&quot;less&quot;&gt;</span><br><span class="line">.loading &#123;</span><br><span class="line">    position: fixed;</span><br><span class="line">    inset: 0;</span><br><span class="line">    background: rgba(0, 0, 0, 0.8);</span><br><span class="line">    display: flex;</span><br><span class="line">    justify-content: center;</span><br><span class="line">    align-items: center;</span><br><span class="line">    &amp;-content &#123;</span><br><span class="line">        font-size: 30px;</span><br><span class="line">        color: #fff;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;  createVNode, render, <span class="title class_">VNode</span>, <span class="title class_">App</span> &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Loading</span> <span class="keyword">from</span> <span class="string">&#x27;./index.vue&#x27;</span></span><br><span class="line"> </span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">    <span class="title function_">install</span>(<span class="params">app: App</span>) &#123;</span><br><span class="line">        <span class="comment">//createVNode vue提供的底层方法 可以给我们组件创建一个虚拟DOM 也就是Vnode</span></span><br><span class="line">        <span class="keyword">const</span> <span class="attr">vnode</span>: <span class="title class_">VNode</span> = <span class="title function_">createVNode</span>(<span class="title class_">Loading</span>)</span><br><span class="line">        <span class="comment">//render 把我们的Vnode 生成真实DOM 并且挂载到指定节点</span></span><br><span class="line">        <span class="title function_">render</span>(vnode, <span class="variable language_">document</span>.<span class="property">body</span>)</span><br><span class="line">        <span class="comment">// Vue 提供的全局配置 可以自定义</span></span><br><span class="line">        app.<span class="property">config</span>.<span class="property">globalProperties</span>.<span class="property">$loading</span> = &#123;</span><br><span class="line">            <span class="attr">show</span>: <span class="function">() =&gt;</span> vnode.<span class="property">component</span>?.<span class="property">exposed</span>?.<span class="title function_">show</span>(),</span><br><span class="line">            <span class="attr">hide</span>: <span class="function">() =&gt;</span> vnode.<span class="property">component</span>?.<span class="property">exposed</span>?.<span class="title function_">hide</span>()</span><br><span class="line">        &#125;</span><br><span class="line"> </span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">Loading</span> <span class="keyword">from</span> <span class="string">&#x27;./components/loading&#x27;</span></span><br><span class="line"><span class="keyword">let</span> app = <span class="title function_">createApp</span>(<span class="title class_">App</span>)</span><br><span class="line">app.<span class="title function_">use</span>(<span class="title class_">Loading</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> <span class="title class_">Lod</span> = &#123;</span><br><span class="line">    <span class="attr">show</span>: <span class="function">() =&gt;</span> <span class="built_in">void</span>,</span><br><span class="line">    <span class="attr">hide</span>: <span class="function">() =&gt;</span> <span class="built_in">void</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//编写ts loading 声明文件放置报错 和 智能提示</span></span><br><span class="line"><span class="keyword">declare</span> <span class="variable language_">module</span> <span class="string">&#x27;@vue/runtime-core&#x27;</span> &#123;</span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">interface</span> <span class="title class_">ComponentCustomProperties</span> &#123;</span><br><span class="line">        <span class="attr">$loading</span>: <span class="title class_">Lod</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">app.<span class="title function_">mount</span>(<span class="string">&#x27;#app&#x27;</span>)</span><br></pre></td></tr></table></figure>
<h2 id="21、其他"><a href="#21、其他" class="headerlink" title="21、其他"></a>21、其他</h2><h3 id="1-Vue如何开发移动端"><a href="#1-Vue如何开发移动端" class="headerlink" title="1 Vue如何开发移动端"></a>1 Vue如何开发移动端</h3><p>推荐参考：<a target="_blank" rel="noopener" href="https://xiaoman.blog.csdn.net/article/details/125490078">https://xiaoman.blog.csdn.net/article/details/125490078</a></p>
<h1 id="二、vue-router"><a href="#二、vue-router" class="headerlink" title="二、vue-router"></a>二、vue-router</h1><h2 id="1-入门"><a href="#1-入门" class="headerlink" title="1 入门"></a>1 入门</h2><h3 id="1-1-安装"><a href="#1-1-安装" class="headerlink" title="1.1 安装"></a>1.1 安装</h3><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install vue-router@4</span><br></pre></td></tr></table></figure>
<h3 id="1-2-新建router-文件"><a href="#1-2-新建router-文件" class="headerlink" title="1.2 新建router 文件"></a>1.2 新建router 文件</h3><figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//引入路由对象</span></span><br><span class="line"><span class="keyword">import</span> &#123; </span><br><span class="line">    createRouter, </span><br><span class="line">    createWebHistory, </span><br><span class="line">    createWebHashHistory, </span><br><span class="line">    createMemoryHistory, </span><br><span class="line">    <span class="title class_">RouteRecordRaw</span> </span><br><span class="line">&#125; <span class="keyword">from</span> <span class="string">&#x27;vue-router&#x27;</span></span><br><span class="line"> </span><br><span class="line"><span class="comment">//vue2 mode history vue3 createWebHistory</span></span><br><span class="line"><span class="comment">//vue2 mode  hash  vue3  createWebHashHistory</span></span><br><span class="line"><span class="comment">//vue2 mode abstact vue3  createMemoryHistory</span></span><br><span class="line"> </span><br><span class="line"><span class="comment">//路由数组的类型 RouteRecordRaw</span></span><br><span class="line"><span class="comment">// 定义一些路由</span></span><br><span class="line"><span class="comment">// 每个路由都需要映射到一个组件。</span></span><br><span class="line"><span class="keyword">const</span> <span class="attr">routes</span>: <span class="title class_">Array</span>&lt;<span class="title class_">RouteRecordRaw</span>&gt; = [&#123;</span><br><span class="line">    <span class="attr">path</span>: <span class="string">&#x27;/&#x27;</span>,</span><br><span class="line">    <span class="attr">component</span>: <span class="function">() =&gt;</span> <span class="keyword">import</span>(<span class="string">&#x27;../components/a.vue&#x27;</span>)</span><br><span class="line">&#125;,&#123;</span><br><span class="line">    <span class="attr">path</span>: <span class="string">&#x27;/register&#x27;</span>,</span><br><span class="line">    <span class="attr">component</span>: <span class="function">() =&gt;</span> <span class="keyword">import</span>(<span class="string">&#x27;../components/b.vue&#x27;</span>)</span><br><span class="line">&#125;]</span><br><span class="line"> </span><br><span class="line"> </span><br><span class="line"> </span><br><span class="line"><span class="keyword">const</span> router = <span class="title function_">createRouter</span>(&#123;</span><br><span class="line">    <span class="attr">history</span>: <span class="title function_">createWebHistory</span>(),</span><br><span class="line">    routes</span><br><span class="line">&#125;)</span><br><span class="line"> </span><br><span class="line"><span class="comment">//导出router</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> router</span><br></pre></td></tr></table></figure>
<h3 id="1-3页面"><a href="#1-3页面" class="headerlink" title="1.3页面"></a>1.3页面</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;h1&gt;vue-router&lt;/h1&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">    &lt;!--使用 router-link 组件进行导航 --&gt;</span><br><span class="line">    &lt;!--通过传递 `to` 来指定链接 --&gt;</span><br><span class="line">    &lt;!--`&lt;router-link&gt;` 将呈现一个带有正确 `href` 属性的 `&lt;a&gt;` 标签--&gt;</span><br><span class="line">      &lt;router-link tag=&quot;div&quot; to=&quot;/&quot;&gt;跳转a&lt;/router-link&gt;</span><br><span class="line">      &lt;router-link tag=&quot;div&quot; style=&quot;margin-left:200px&quot; to=&quot;/register&quot;&gt;跳转b&lt;/router-link&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    &lt;hr /&gt;</span><br><span class="line">    &lt;!-- 路由出口 --&gt;</span><br><span class="line">    &lt;!-- 路由匹配到的组件将渲染在这里 --&gt;</span><br><span class="line">    &lt;router-view&gt;&lt;/router-view&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br></pre></td></tr></table></figure>
<h3 id="1-4main-ts-挂载"><a href="#1-4main-ts-挂载" class="headerlink" title="1.4main.ts 挂载"></a>1.4main.ts 挂载</h3><figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; createApp &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">App</span> <span class="keyword">from</span> <span class="string">&#x27;./App.vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> router <span class="keyword">from</span> <span class="string">&#x27;./router&#x27;</span></span><br><span class="line"><span class="title function_">createApp</span>(<span class="title class_">App</span>).<span class="title function_">use</span>(router).<span class="title function_">mount</span>(<span class="string">&#x27;#app&#x27;</span>)</span><br></pre></td></tr></table></figure>
<h2 id="2命名路由-amp-编程式导航"><a href="#2命名路由-amp-编程式导航" class="headerlink" title="2命名路由&amp;编程式导航"></a>2命名路由&amp;编程式导航</h2><h3 id="2-1命名路由"><a href="#2-1命名路由" class="headerlink" title="2.1命名路由"></a>2.1命名路由</h3><blockquote>
<p>除了 <code>path</code> 之外，你还可以为任何路由提供 <code>name</code>。这有以下优点：</p>
<ul>
<li>没有硬编码的 URL</li>
<li><code>params</code> 的自动编码/解码。</li>
<li>防止你在 url 中出现打字错误。</li>
<li>绕过路径排序（如显示一个）</li>
</ul>
</blockquote>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="attr">routes</span>:<span class="title class_">Array</span>&lt;<span class="title class_">RouteRecordRaw</span>&gt; = [</span><br><span class="line">    &#123;</span><br><span class="line">        <span class="attr">path</span>:<span class="string">&quot;/&quot;</span>,</span><br><span class="line">        <span class="attr">name</span>:<span class="string">&quot;Login&quot;</span>,</span><br><span class="line">        <span class="attr">component</span>:<span class="function">()=&gt;</span> <span class="keyword">import</span>(<span class="string">&#x27;../components/login.vue&#x27;</span>)</span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">        <span class="attr">path</span>:<span class="string">&quot;/reg&quot;</span>,</span><br><span class="line">        <span class="attr">name</span>:<span class="string">&quot;Reg&quot;</span>,</span><br><span class="line">        <span class="attr">component</span>:<span class="function">()=&gt;</span> <span class="keyword">import</span>(<span class="string">&#x27;../components/reg.vue&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">]</span><br></pre></td></tr></table></figure>
<p>router-link跳转方式需要改变 变为对象并且有对应name</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;h1&gt;vue-router&lt;/h1&gt;</span><br><span class="line">&lt;div&gt;</span><br><span class="line">  &lt;router-link :to=&quot;&#123;name:&#x27;Login&#x27;&#125;&quot;&gt;Login&lt;/router-link&gt;</span><br><span class="line">  &lt;router-link style=&quot;margin-left:10px&quot; :to=&quot;&#123;name:&#x27;Reg&#x27;&#125;&quot;&gt;Reg&lt;/router-link&gt;</span><br><span class="line">&lt;/div&gt;</span><br><span class="line">&lt;hr /&gt;</span><br></pre></td></tr></table></figure>
<h3 id="2-2编程式导航"><a href="#2-2编程式导航" class="headerlink" title="2.2编程式导航"></a>2.2编程式导航</h3><p>1.字符串模式</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; useRouter &#125; <span class="keyword">from</span> <span class="string">&#x27;vue-router&#x27;</span></span><br><span class="line"><span class="keyword">const</span> router = <span class="title function_">useRouter</span>()</span><br><span class="line"> </span><br><span class="line"><span class="keyword">const</span> <span class="title function_">toPage</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">  router.<span class="title function_">push</span>(<span class="string">&#x27;/reg&#x27;</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>2.对象模式</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; useRouter &#125; <span class="keyword">from</span> <span class="string">&#x27;vue-router&#x27;</span></span><br><span class="line"><span class="keyword">const</span> router = <span class="title function_">useRouter</span>()</span><br><span class="line"> </span><br><span class="line"><span class="keyword">const</span> <span class="title function_">toPage</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">  router.<span class="title function_">push</span>(&#123;</span><br><span class="line">    <span class="attr">path</span>: <span class="string">&#x27;/reg&#x27;</span></span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>3.命名式路由模式</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; useRouter &#125; <span class="keyword">from</span> <span class="string">&#x27;vue-router&#x27;</span></span><br><span class="line"><span class="keyword">const</span> router = <span class="title function_">useRouter</span>()</span><br><span class="line"> </span><br><span class="line"><span class="keyword">const</span> <span class="title function_">toPage</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">  router.<span class="title function_">push</span>(&#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;Reg&#x27;</span></span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="3历史记录"><a href="#3历史记录" class="headerlink" title="3历史记录"></a>3历史记录</h2><h3 id="3-1replace"><a href="#3-1replace" class="headerlink" title="3.1replace"></a>3.1replace</h3><blockquote>
<p>采用replace进行页面的跳转会同样也会创建渲染新的Vue组件，但是在history中其不会重复保存记录，而是替换原有的vue组件；</p>
</blockquote>
<p>router-link 使用方法</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;router-link replace to=&quot;/&quot;&gt;Login&lt;/router-link&gt;</span><br><span class="line">&lt;router-link replace style=&quot;margin-left:10px&quot; to=&quot;/reg&quot;&gt;Reg&lt;/router-link&gt;</span><br></pre></td></tr></table></figure>
<p>编程式导航</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&lt;button @click=&quot;toPage(&#x27;/&#x27;)&quot;&gt;Login&lt;/button&gt;</span><br><span class="line">&lt;button @click=&quot;toPage(&#x27;/reg&#x27;)&quot;&gt;Reg&lt;/button&gt;</span><br><span class="line"></span><br><span class="line">import &#123; useRouter &#125; from &#x27;vue-router&#x27;</span><br><span class="line">const router = useRouter()</span><br><span class="line"> </span><br><span class="line">const toPage = (url: string) =&gt; &#123;</span><br><span class="line">  router.replace(url)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>横跨历史</p>
<blockquote>
<p>采用一个整数作为参数，表示在历史堆栈中前进或后退多少步</p>
</blockquote>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title function_">next</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">  <span class="comment">//前进 数量不限于1</span></span><br><span class="line">  router.<span class="title function_">go</span>(<span class="number">1</span>)</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="keyword">const</span> <span class="title function_">prev</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">  <span class="comment">//后退</span></span><br><span class="line">  router.<span class="title function_">back</span>()</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="4路由传参"><a href="#4路由传参" class="headerlink" title="4路由传参"></a>4路由传参</h2><h3 id="4-1Query路由传参"><a href="#4-1Query路由传参" class="headerlink" title="4.1Query路由传参"></a>4.1Query路由传参</h3><blockquote>
<p>编程式导航 使用router push 或者 replace 的时候 改为对象形式新增query 必须传入一个对象</p>
</blockquote>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title function_">toDetail</span> = (<span class="params">item: Item</span>) =&gt; &#123;</span><br><span class="line">    router.<span class="title function_">push</span>(&#123;</span><br><span class="line">        <span class="attr">path</span>: <span class="string">&#x27;/reg&#x27;</span>,</span><br><span class="line">        <span class="attr">query</span>: item</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>接受参数</strong></p>
<blockquote>
<p><strong>使用 useRoute 的 query</strong></p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;div&gt;品牌：&#123;&#123; route.query?.name &#125;&#125;&lt;/div&gt;</span><br><span class="line">&lt;div&gt;价格：&#123;&#123; route.query?.price &#125;&#125;&lt;/div&gt;</span><br><span class="line">&lt;div&gt;ID：&#123;&#123; route.query?.id &#125;&#125;&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<h3 id="4-2Params路由传参"><a href="#4-2Params路由传参" class="headerlink" title="4.2Params路由传参"></a>4.2Params路由传参</h3><blockquote>
<p>编程式导航 使用router push 或者 replace 的时候 改为对象形式并且只能使用name，path无效，然后传入params</p>
</blockquote>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title function_">toDetail</span> = (<span class="params">item: Item</span>) =&gt; &#123;</span><br><span class="line">    router.<span class="title function_">push</span>(&#123;</span><br><span class="line">        <span class="attr">name</span>: <span class="string">&#x27;Reg&#x27;</span>,</span><br><span class="line">        <span class="attr">params</span>: item</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;div&gt;品牌：&#123;&#123; route.params?.name &#125;&#125;&lt;/div&gt;</span><br><span class="line">&lt;div&gt;价格：&#123;&#123; route.params?.price &#125;&#125;&lt;/div&gt;</span><br><span class="line">&lt;div&gt;ID：&#123;&#123; route.params?.id &#125;&#125;&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<h3 id="4-3动态路由传参"><a href="#4-3动态路由传参" class="headerlink" title="4.3动态路由传参"></a>4.3动态路由传参</h3><blockquote>
<p><em>路径参数</em> 用冒号 <code>:</code> 表示。当一个路由被匹配时，它的 <em>params</em> 的值将在每个组件</p>
<p>二者的区别:</p>
<p>query 传参配置的是 path，而 params 传参配置的是name，在 params中配置 path 无效</p>
<p>query 在路由配置不需要设置参数，而 params 必须设置</p>
<p>query 传递的参数会显示在地址栏中</p>
<p>params传参刷新会无效，但是 query 会保存传递过来的值，刷新不变 ;</p>
</blockquote>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="attr">routes</span>:<span class="title class_">Array</span>&lt;<span class="title class_">RouteRecordRaw</span>&gt; = [</span><br><span class="line">    &#123;</span><br><span class="line">        <span class="attr">path</span>:<span class="string">&quot;/&quot;</span>,</span><br><span class="line">        <span class="attr">name</span>:<span class="string">&quot;Login&quot;</span>,</span><br><span class="line">        <span class="attr">component</span>:<span class="function">()=&gt;</span> <span class="keyword">import</span>(<span class="string">&#x27;../components/login.vue&#x27;</span>)</span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">        <span class="comment">//动态路由参数</span></span><br><span class="line">        <span class="attr">path</span>:<span class="string">&quot;/reg/:id&quot;</span>,</span><br><span class="line">        <span class="attr">name</span>:<span class="string">&quot;Reg&quot;</span>,</span><br><span class="line">        <span class="attr">component</span>:<span class="function">()=&gt;</span> <span class="keyword">import</span>(<span class="string">&#x27;../components/reg.vue&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">]</span><br></pre></td></tr></table></figure>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title function_">toDetail</span> = (<span class="params">item: Item</span>) =&gt; &#123;</span><br><span class="line">    router.<span class="title function_">push</span>(&#123;</span><br><span class="line">        <span class="attr">name</span>: <span class="string">&#x27;Reg&#x27;</span>,</span><br><span class="line">        <span class="attr">params</span>: &#123;</span><br><span class="line">            <span class="attr">id</span>: item.<span class="property">id</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; useRoute &#125; <span class="keyword">from</span> <span class="string">&#x27;vue-router&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; data &#125; <span class="keyword">from</span> <span class="string">&#x27;./list.json&#x27;</span></span><br><span class="line"><span class="keyword">const</span> route = <span class="title function_">useRoute</span>()</span><br><span class="line"><span class="keyword">const</span> item = data.<span class="title function_">find</span>(<span class="function"><span class="params">v</span> =&gt;</span> v.<span class="property">id</span> === <span class="title class_">Number</span>(route.<span class="property">params</span>.<span class="property">id</span>))</span><br></pre></td></tr></table></figure>
<h2 id="5嵌套路由"><a href="#5嵌套路由" class="headerlink" title="5嵌套路由"></a>5嵌套路由</h2><figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="attr">routes</span>: <span class="title class_">Array</span>&lt;<span class="title class_">RouteRecordRaw</span>&gt; = [</span><br><span class="line">    &#123;</span><br><span class="line">        <span class="attr">path</span>: <span class="string">&quot;/user&quot;</span>,</span><br><span class="line">        <span class="attr">component</span>: <span class="function">() =&gt;</span> <span class="keyword">import</span>(<span class="string">&#x27;../components/footer.vue&#x27;</span>),</span><br><span class="line">        <span class="attr">children</span>: [</span><br><span class="line">            &#123;</span><br><span class="line">                <span class="attr">path</span>: <span class="string">&quot;&quot;</span>,</span><br><span class="line">                <span class="attr">name</span>: <span class="string">&quot;Login&quot;</span>,</span><br><span class="line">                <span class="attr">component</span>: <span class="function">() =&gt;</span> <span class="keyword">import</span>(<span class="string">&#x27;../components/login.vue&#x27;</span>)</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                <span class="attr">path</span>: <span class="string">&quot;reg&quot;</span>,</span><br><span class="line">                <span class="attr">name</span>: <span class="string">&quot;Reg&quot;</span>,</span><br><span class="line">                <span class="attr">component</span>: <span class="function">() =&gt;</span> <span class="keyword">import</span>(<span class="string">&#x27;../components/reg.vue&#x27;</span>)</span><br><span class="line">            &#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;,</span><br><span class="line"> </span><br><span class="line">]</span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&lt;div&gt;</span><br><span class="line">    &lt;router-view&gt;&lt;/router-view&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">        &lt;router-link to=&quot;/&quot;&gt;login&lt;/router-link&gt;</span><br><span class="line">        &lt;router-link style=&quot;margin-left:10px;&quot; to=&quot;/user/reg&quot;&gt;reg&lt;/router-link&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<p><code>不要忘记写router-view</code></p>
<h2 id="6重定向-amp-别名"><a href="#6重定向-amp-别名" class="headerlink" title="6重定向&amp;别名"></a>6重定向&amp;别名</h2><h3 id="6-1字符串形式"><a href="#6-1字符串形式" class="headerlink" title="6.1字符串形式"></a>6.1字符串形式</h3><figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="attr">routes</span>: <span class="title class_">Array</span>&lt;<span class="title class_">RouteRecordRaw</span>&gt; = [</span><br><span class="line">    &#123;</span><br><span class="line">        <span class="attr">path</span>:<span class="string">&#x27;/&#x27;</span>,</span><br><span class="line">        <span class="attr">component</span>:<span class="function">()=&gt;</span> <span class="keyword">import</span>(<span class="string">&#x27;../components/root.vue&#x27;</span>),</span><br><span class="line">        <span class="attr">redirect</span>:<span class="string">&#x27;/user1&#x27;</span>,</span><br><span class="line">        <span class="attr">children</span>:[</span><br><span class="line">            &#123;</span><br><span class="line">                <span class="attr">path</span>:<span class="string">&#x27;/user1&#x27;</span>,</span><br><span class="line">                <span class="attr">components</span>:&#123;</span><br><span class="line">                    <span class="attr">default</span>:<span class="function">()=&gt;</span> <span class="keyword">import</span>(<span class="string">&#x27;../components/A.vue&#x27;</span>)</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                <span class="attr">path</span>:<span class="string">&#x27;/user2&#x27;</span>,</span><br><span class="line">                <span class="attr">components</span>:&#123;</span><br><span class="line">                    <span class="attr">bbb</span>:<span class="function">()=&gt;</span> <span class="keyword">import</span>(<span class="string">&#x27;../components/B.vue&#x27;</span>),</span><br><span class="line">                    <span class="attr">ccc</span>:<span class="function">()=&gt;</span> <span class="keyword">import</span>(<span class="string">&#x27;../components/C.vue&#x27;</span>)</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;</span><br><span class="line">]</span><br></pre></td></tr></table></figure>
<h3 id="6-2对象形式"><a href="#6-2对象形式" class="headerlink" title="6.2对象形式"></a>6.2对象形式</h3><figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="attr">routes</span>: <span class="title class_">Array</span>&lt;<span class="title class_">RouteRecordRaw</span>&gt; = [</span><br><span class="line">    &#123;</span><br><span class="line">        <span class="attr">path</span>: <span class="string">&#x27;/&#x27;</span>,</span><br><span class="line">        <span class="attr">component</span>: <span class="function">() =&gt;</span> <span class="keyword">import</span>(<span class="string">&#x27;../components/root.vue&#x27;</span>),</span><br><span class="line">        <span class="attr">redirect</span>: &#123; <span class="attr">path</span>: <span class="string">&#x27;/user1&#x27;</span> &#125;,</span><br><span class="line">        <span class="attr">children</span>: [</span><br><span class="line">            &#123;</span><br><span class="line">                <span class="attr">path</span>: <span class="string">&#x27;/user1&#x27;</span>,</span><br><span class="line">                <span class="attr">components</span>: &#123;</span><br><span class="line">                    <span class="attr">default</span>: <span class="function">() =&gt;</span> <span class="keyword">import</span>(<span class="string">&#x27;../components/A.vue&#x27;</span>)</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                <span class="attr">path</span>: <span class="string">&#x27;/user2&#x27;</span>,</span><br><span class="line">                <span class="attr">components</span>: &#123;</span><br><span class="line">                    <span class="attr">bbb</span>: <span class="function">() =&gt;</span> <span class="keyword">import</span>(<span class="string">&#x27;../components/B.vue&#x27;</span>),</span><br><span class="line">                    <span class="attr">ccc</span>: <span class="function">() =&gt;</span> <span class="keyword">import</span>(<span class="string">&#x27;../components/C.vue&#x27;</span>)</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;</span><br><span class="line">]</span><br></pre></td></tr></table></figure>
<h3 id="6-3函数模式（可以传参）"><a href="#6-3函数模式（可以传参）" class="headerlink" title="6.3函数模式（可以传参）"></a>6.3函数模式（可以传参）</h3><figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="attr">routes</span>: <span class="title class_">Array</span>&lt;<span class="title class_">RouteRecordRaw</span>&gt; = [</span><br><span class="line">    &#123;</span><br><span class="line">        <span class="attr">path</span>: <span class="string">&#x27;/&#x27;</span>,</span><br><span class="line">        <span class="attr">component</span>: <span class="function">() =&gt;</span> <span class="keyword">import</span>(<span class="string">&#x27;../components/root.vue&#x27;</span>),</span><br><span class="line">        <span class="attr">redirect</span>: <span class="function">(<span class="params">to</span>) =&gt;</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> &#123;</span><br><span class="line">                <span class="attr">path</span>: <span class="string">&#x27;/user1&#x27;</span>,</span><br><span class="line">                <span class="attr">query</span>: to.<span class="property">query</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">children</span>: [</span><br><span class="line">            &#123;</span><br><span class="line">                <span class="attr">path</span>: <span class="string">&#x27;/user1&#x27;</span>,</span><br><span class="line">                <span class="attr">components</span>: &#123;</span><br><span class="line">                    <span class="attr">default</span>: <span class="function">() =&gt;</span> <span class="keyword">import</span>(<span class="string">&#x27;../components/A.vue&#x27;</span>)</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                <span class="attr">path</span>: <span class="string">&#x27;/user2&#x27;</span>,</span><br><span class="line">                <span class="attr">components</span>: &#123;</span><br><span class="line">                    <span class="attr">bbb</span>: <span class="function">() =&gt;</span> <span class="keyword">import</span>(<span class="string">&#x27;../components/B.vue&#x27;</span>),</span><br><span class="line">                    <span class="attr">ccc</span>: <span class="function">() =&gt;</span> <span class="keyword">import</span>(<span class="string">&#x27;../components/C.vue&#x27;</span>)</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;</span><br><span class="line">]</span><br></pre></td></tr></table></figure>
<h3 id="6-4别名-alias"><a href="#6-4别名-alias" class="headerlink" title="6.4别名 alias"></a>6.4别名 alias</h3><blockquote>
<p>将 / 别名为 /root，意味着当用户访问 /root时，URL 仍然是 /user，但会被匹配为用户正在访问 /</p>
</blockquote>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="attr">routes</span>: <span class="title class_">Array</span>&lt;<span class="title class_">RouteRecordRaw</span>&gt; = [</span><br><span class="line">    &#123;</span><br><span class="line">        <span class="attr">path</span>: <span class="string">&#x27;/&#x27;</span>,</span><br><span class="line">        <span class="attr">component</span>: <span class="function">() =&gt;</span> <span class="keyword">import</span>(<span class="string">&#x27;../components/root.vue&#x27;</span>),</span><br><span class="line">        <span class="attr">alias</span>:[<span class="string">&quot;/root&quot;</span>,<span class="string">&quot;/root2&quot;</span>,<span class="string">&quot;/root3&quot;</span>],</span><br><span class="line">        <span class="attr">children</span>: [</span><br><span class="line">            &#123;</span><br><span class="line">                <span class="attr">path</span>: <span class="string">&#x27;user1&#x27;</span>,</span><br><span class="line">                <span class="attr">components</span>: &#123;</span><br><span class="line">                    <span class="attr">default</span>: <span class="function">() =&gt;</span> <span class="keyword">import</span>(<span class="string">&#x27;../components/A.vue&#x27;</span>)</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                <span class="attr">path</span>: <span class="string">&#x27;user2&#x27;</span>,</span><br><span class="line">                <span class="attr">components</span>: &#123;</span><br><span class="line">                    <span class="attr">bbb</span>: <span class="function">() =&gt;</span> <span class="keyword">import</span>(<span class="string">&#x27;../components/B.vue&#x27;</span>),</span><br><span class="line">                    <span class="attr">ccc</span>: <span class="function">() =&gt;</span> <span class="keyword">import</span>(<span class="string">&#x27;../components/C.vue&#x27;</span>)</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;</span><br><span class="line">]</span><br></pre></td></tr></table></figure>
<h2 id="7导航守卫"><a href="#7导航守卫" class="headerlink" title="7导航守卫"></a>7导航守卫</h2><blockquote>
<p>每个守卫方法接收三个参数：</p>
<p>to: Route， 即将要进入的目标 路由对象；<br>from: Route，当前导航正要离开的路由；<br>next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。<br>next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。<br>next(‘/‘) 或者 next({ path: ‘/‘ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。</p>
</blockquote>
<h3 id="7-1全局前置守卫"><a href="#7-1全局前置守卫" class="headerlink" title="7.1全局前置守卫"></a>7.1全局前置守卫</h3><figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">router.<span class="title function_">beforeEach</span>(<span class="function">(<span class="params">to, form, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(to, form);</span><br><span class="line">    <span class="title function_">next</span>()</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>案例 权限判断</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> whileList = [<span class="string">&#x27;/&#x27;</span>]</span><br><span class="line"> </span><br><span class="line">router.<span class="title function_">beforeEach</span>(<span class="function">(<span class="params">to, <span class="keyword">from</span>, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">let</span> token = <span class="variable language_">localStorage</span>.<span class="title function_">getItem</span>(<span class="string">&#x27;token&#x27;</span>)</span><br><span class="line">    <span class="comment">//白名单 有值 或者登陆过存储了token信息可以跳转 否则就去登录页面</span></span><br><span class="line">    <span class="keyword">if</span> (whileList.<span class="title function_">includes</span>(to.<span class="property">path</span>) || token) &#123;</span><br><span class="line">        <span class="title function_">next</span>()</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="title function_">next</span>(&#123;</span><br><span class="line">            <span class="attr">path</span>:<span class="string">&#x27;/&#x27;</span></span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h3 id="7-2全局后置守卫"><a href="#7-2全局后置守卫" class="headerlink" title="7.2全局后置守卫"></a>7.2全局后置守卫</h3><figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">router.<span class="title function_">afterEach</span>(<span class="function">(<span class="params">to,<span class="keyword">from</span></span>)=&gt;</span>&#123;</span><br><span class="line">    .....</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h2 id="8路由元信息"><a href="#8路由元信息" class="headerlink" title="8路由元信息"></a>8路由元信息</h2><blockquote>
<p>可以在<strong>导航守卫</strong>或者是<strong>路由对象</strong>中访问路由的元信息数据。</p>
</blockquote>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> router = <span class="title function_">createRouter</span>(&#123;</span><br><span class="line">  <span class="attr">history</span>: <span class="title function_">createWebHistory</span>(<span class="keyword">import</span>.<span class="property">meta</span>.<span class="property">env</span>.<span class="property">BASE_URL</span>),</span><br><span class="line">  <span class="attr">routes</span>: [</span><br><span class="line">    &#123;</span><br><span class="line">      <span class="attr">path</span>: <span class="string">&#x27;/&#x27;</span>,</span><br><span class="line">      <span class="attr">component</span>: <span class="function">() =&gt;</span> <span class="keyword">import</span>(<span class="string">&#x27;@/views/Login.vue&#x27;</span>),</span><br><span class="line">      <span class="attr">meta</span>: &#123;</span><br><span class="line">        <span class="attr">title</span>: <span class="string">&quot;登录&quot;</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">      <span class="attr">path</span>: <span class="string">&#x27;/index&#x27;</span>,</span><br><span class="line">      <span class="attr">component</span>: <span class="function">() =&gt;</span> <span class="keyword">import</span>(<span class="string">&#x27;@/views/Index.vue&#x27;</span>),</span><br><span class="line">      <span class="attr">meta</span>: &#123;</span><br><span class="line">        <span class="attr">title</span>: <span class="string">&quot;首页&quot;</span>,</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>使用TS扩展</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">declare</span> <span class="variable language_">module</span> <span class="string">&#x27;vue-router&#x27;</span> &#123;</span><br><span class="line">  <span class="keyword">interface</span> <span class="title class_">RouteMeta</span> &#123;</span><br><span class="line">    title?: <span class="built_in">string</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="9路由过渡动效"><a href="#9路由过渡动效" class="headerlink" title="9路由过渡动效"></a>9路由过渡动效</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;router-view #default=&quot;&#123;route,Component&#125;&quot;&gt;</span><br><span class="line">    &lt;transition  :enter-active-class=&quot;`animate__animated $&#123;route.meta.transition&#125;`&quot;&gt;</span><br><span class="line">        &lt;component :is=&quot;Component&quot;&gt;&lt;/component&gt;</span><br><span class="line">    &lt;/transition&gt;</span><br><span class="line">&lt;/router-view&gt;</span><br></pre></td></tr></table></figure>
<blockquote>
<p>上面的用法会对所有的路由使用相同的过渡。如果你想让每个路由的组件有不同的过渡，你可以将<a target="_blank" rel="noopener" href="https://router.vuejs.org/zh/guide/advanced/meta.html">元信息</a>和动态的 <code>name</code> 结合在一起，放在<code>&lt;transition&gt;</code> 上：</p>
</blockquote>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">declare</span> <span class="variable language_">module</span> <span class="string">&#x27;vue-router&#x27;</span>&#123;</span><br><span class="line">     <span class="keyword">interface</span> <span class="title class_">RouteMeta</span> &#123;</span><br><span class="line">        <span class="attr">title</span>:<span class="built_in">string</span>,</span><br><span class="line">        <span class="attr">transition</span>:<span class="built_in">string</span>,</span><br><span class="line">     &#125;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="keyword">const</span> router = <span class="title function_">createRouter</span>(&#123;</span><br><span class="line">  <span class="attr">history</span>: <span class="title function_">createWebHistory</span>(<span class="keyword">import</span>.<span class="property">meta</span>.<span class="property">env</span>.<span class="property">BASE_URL</span>),</span><br><span class="line">  <span class="attr">routes</span>: [</span><br><span class="line">    &#123;</span><br><span class="line">      <span class="attr">path</span>: <span class="string">&#x27;/&#x27;</span>,</span><br><span class="line">      <span class="attr">component</span>: <span class="function">() =&gt;</span> <span class="keyword">import</span>(<span class="string">&#x27;@/views/Login.vue&#x27;</span>),</span><br><span class="line">      <span class="attr">meta</span>:&#123;</span><br><span class="line">         <span class="attr">title</span>:<span class="string">&quot;登录页面&quot;</span>,</span><br><span class="line">         <span class="attr">transition</span>:<span class="string">&quot;animate__fadeInUp&quot;</span>,</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">      <span class="attr">path</span>: <span class="string">&#x27;/index&#x27;</span>,</span><br><span class="line">      <span class="attr">component</span>: <span class="function">() =&gt;</span> <span class="keyword">import</span>(<span class="string">&#x27;@/views/Index.vue&#x27;</span>),</span><br><span class="line">      <span class="attr">meta</span>:&#123;</span><br><span class="line">         <span class="attr">title</span>:<span class="string">&quot;首页！！！&quot;</span>,</span><br><span class="line">         <span class="attr">transition</span>:<span class="string">&quot;animate__bounceIn&quot;</span>,</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h2 id="10滚动行为"><a href="#10滚动行为" class="headerlink" title="10滚动行为"></a>10滚动行为</h2><blockquote>
<p>使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。vue-router 可以自定义路由切换时页面如何滚动。</p>
</blockquote>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> router = <span class="title function_">createRouter</span>(&#123;</span><br><span class="line">  <span class="attr">history</span>: <span class="title function_">createWebHistory</span>(),</span><br><span class="line">  <span class="attr">scrollBehavior</span>: <span class="function">(<span class="params">to, <span class="keyword">from</span>, savePosition</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(to, <span class="string">&#x27;==============&gt;&#x27;</span>, savePosition);</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">r</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">        <span class="title function_">r</span>(&#123;</span><br><span class="line">          <span class="attr">top</span>: <span class="number">10000</span></span><br><span class="line">        &#125;)</span><br><span class="line">      &#125;, <span class="number">2000</span>);</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;,</span><br></pre></td></tr></table></figure>
<blockquote>
<p>scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。</p>
<p>scrollBehavior 返回滚动位置的对象信息，长这样：</p>
<p>{ left: number, top: number }</p>
</blockquote>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> router = <span class="title function_">createRouter</span>(&#123;</span><br><span class="line">  <span class="attr">history</span>: <span class="title function_">createWebHistory</span>(),</span><br><span class="line">  <span class="attr">scrollBehavior</span>: <span class="function">(<span class="params">to, <span class="keyword">from</span>, savePosition</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">       <span class="attr">top</span>:<span class="number">200</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br></pre></td></tr></table></figure>
<h2 id="11动态路由"><a href="#11动态路由" class="headerlink" title="11动态路由"></a>11动态路由</h2><h3 id="11-1添加路由"><a href="#11-1添加路由" class="headerlink" title="11.1添加路由"></a>11.1添加路由</h3><blockquote>
<p>动态路由主要通过两个函数实现。router.addRoute() 和 router.removeRoute()。它们只注册一个新的路由，也就是说，如果新增加的路由与当前位置相匹配，就需要你用 router.push() 或 router.replace() 来手动导航，才能显示该新路由</p>
</blockquote>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">router.<span class="title function_">addRoute</span>(&#123; <span class="attr">path</span>: <span class="string">&#x27;/about&#x27;</span>, <span class="attr">component</span>: <span class="title class_">About</span> &#125;)</span><br></pre></td></tr></table></figure>
<blockquote>
<p>查看现有路由<br>Vue Router 提供了两个功能来查看现有的路由：</p>
<p>router.hasRoute()：检查路由是否存在。<br>router.getRoutes()：获取一个包含所有路由记录的数组。</p>
</blockquote>
<p>前台代码：</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title function_">initRouter</span> = <span class="keyword">async</span> (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">    <span class="keyword">const</span> result = <span class="keyword">await</span> axios.<span class="title function_">get</span>(<span class="string">&#x27;http://localhost:9999/login&#x27;</span>, &#123; <span class="attr">params</span>: formInline &#125;);</span><br><span class="line">    result.<span class="property">data</span>.<span class="property">route</span>.<span class="title function_">forEach</span>(<span class="function">(<span class="params">v: <span class="built_in">any</span></span>) =&gt;</span> &#123;</span><br><span class="line">        router.<span class="title function_">addRoute</span>(&#123;</span><br><span class="line">            <span class="attr">path</span>: v.<span class="property">path</span>,</span><br><span class="line">            <span class="attr">name</span>: v.<span class="property">name</span>,</span><br><span class="line">                                    <span class="comment">//这儿不能使用@</span></span><br><span class="line">            <span class="attr">component</span>: <span class="function">() =&gt;</span> <span class="keyword">import</span>(<span class="string">`../views/<span class="subst">$&#123;v.component&#125;</span>`</span>)</span><br><span class="line">        &#125;)</span><br><span class="line">        router.<span class="title function_">push</span>(<span class="string">&#x27;/index&#x27;</span>)</span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(router.<span class="title function_">getRoutes</span>());</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>后台代码：</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> express, &#123; <span class="title class_">Express</span>, <span class="title class_">Request</span>, <span class="title class_">Response</span> &#125; <span class="keyword">from</span> <span class="string">&#x27;express&#x27;</span></span><br><span class="line"> </span><br><span class="line"><span class="keyword">const</span> <span class="attr">app</span>: <span class="title class_">Express</span> = <span class="title function_">express</span>()</span><br><span class="line"> </span><br><span class="line">app.<span class="title function_">get</span>(<span class="string">&#x27;/login&#x27;</span>, <span class="function">(<span class="params">req: Request, res: Response</span>) =&gt;</span> &#123;</span><br><span class="line">    res.<span class="title function_">header</span>(<span class="string">&quot;Access-Control-Allow-Origin&quot;</span>, <span class="string">&quot;*&quot;</span>);</span><br><span class="line">    <span class="keyword">if</span> (req.<span class="property">query</span>.<span class="property">user</span> == <span class="string">&#x27;admin&#x27;</span> &amp;&amp; req.<span class="property">query</span>.<span class="property">password</span> == <span class="string">&#x27;123456&#x27;</span>) &#123;</span><br><span class="line">        res.<span class="title function_">json</span>(&#123;</span><br><span class="line">            <span class="attr">route</span>: [</span><br><span class="line">                &#123;</span><br><span class="line">                    <span class="attr">path</span>: <span class="string">&quot;/demo1&quot;</span>,</span><br><span class="line">                    <span class="attr">name</span>: <span class="string">&quot;Demo1&quot;</span>,</span><br><span class="line">                    <span class="attr">component</span>: <span class="string">&#x27;demo1.vue&#x27;</span></span><br><span class="line">                &#125;,</span><br><span class="line">                &#123;</span><br><span class="line">                    <span class="attr">path</span>: <span class="string">&quot;/demo2&quot;</span>,</span><br><span class="line">                    <span class="attr">name</span>: <span class="string">&quot;Demo2&quot;</span>,</span><br><span class="line">                    <span class="attr">component</span>: <span class="string">&#x27;demo2.vue&#x27;</span></span><br><span class="line">                &#125;,</span><br><span class="line">                &#123;</span><br><span class="line">                    <span class="attr">path</span>: <span class="string">&quot;/demo3&quot;</span>,</span><br><span class="line">                    <span class="attr">name</span>: <span class="string">&quot;Demo3&quot;</span>,</span><br><span class="line">                    <span class="attr">component</span>: <span class="string">&#x27;demo3.vue&#x27;</span></span><br><span class="line">                &#125;</span><br><span class="line">            ]</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">        res.<span class="title function_">json</span>(&#123;</span><br><span class="line">            <span class="attr">code</span>:<span class="number">400</span>,</span><br><span class="line">            <span class="attr">mesage</span>:<span class="string">&quot;账号密码错误&quot;</span></span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"> </span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">9999</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;http://localhost:9999&#x27;</span>);</span><br><span class="line"> </span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h1 id="三、Pinia"><a href="#三、Pinia" class="headerlink" title="三、Pinia"></a>三、Pinia</h1><h2 id="1起步-安装"><a href="#1起步-安装" class="headerlink" title="1起步 安装"></a>1起步 安装</h2><h3 id="1-1安装"><a href="#1-1安装" class="headerlink" title="1.1安装"></a>1.1安装</h3><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">yarn add pinia</span><br><span class="line">or</span><br><span class="line">npm install pinia</span><br></pre></td></tr></table></figure>
<h3 id="1-2引入注册"><a href="#1-2引入注册" class="headerlink" title="1.2引入注册"></a>1.2引入注册</h3><figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; createApp &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">App</span> <span class="keyword">from</span> <span class="string">&#x27;./App.vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123;createPinia&#125; <span class="keyword">from</span> <span class="string">&#x27;pinia&#x27;</span></span><br><span class="line"> </span><br><span class="line"><span class="keyword">const</span> store = <span class="title function_">createPinia</span>()</span><br><span class="line"><span class="keyword">let</span> app = <span class="title function_">createApp</span>(<span class="title class_">App</span>)</span><br><span class="line">app.<span class="title function_">use</span>(store)</span><br><span class="line">app.<span class="title function_">mount</span>(<span class="string">&#x27;#app&#x27;</span>)</span><br></pre></td></tr></table></figure>
<h2 id="2初始化仓库Store"><a href="#2初始化仓库Store" class="headerlink" title="2初始化仓库Store"></a>2初始化仓库Store</h2><p>1.新建一个文件夹Store</p>
<p>2.新建文件[name].ts</p>
<p>3.定义仓库Store</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; defineStore &#125; <span class="keyword">from</span> <span class="string">&#x27;pinia&#x27;</span></span><br></pre></td></tr></table></figure>
<p>4.我们需要知道存储是使用定义的defineStore()，并且它需要一个唯一的名称，作为第一个参数传递</p>
<p>新建文件store-namespace/index.ts</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> <span class="keyword">enum</span> <span class="title class_">Names</span> &#123;</span><br><span class="line">    <span class="title class_">Test</span> = <span class="string">&#x27;TEST&#x27;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; defineStore &#125; <span class="keyword">from</span> <span class="string">&#x27;pinia&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; <span class="title class_">Names</span> &#125; <span class="keyword">from</span> <span class="string">&#x27;./store-namespace&#x27;</span></span><br><span class="line"> </span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> useTestStore = <span class="title function_">defineStore</span>(<span class="title class_">Names</span>.<span class="property">Test</span>, &#123;</span><br><span class="line"> </span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p><code>这个名称，也称为id，是必要的，Pania 使用它来将商店连接到 devtools。将返回的函数命名为use...是可组合项之间的约定，以使其使用习惯。</code></p>
<p>5.定义值</p>
<p>State 箭头函数 返回一个对象 在对象里面定义值</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; defineStore &#125; <span class="keyword">from</span> <span class="string">&#x27;pinia&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; <span class="title class_">Names</span> &#125; <span class="keyword">from</span> <span class="string">&#x27;./store-namespce&#x27;</span></span><br><span class="line"> </span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> useTestStore = <span class="title function_">defineStore</span>(<span class="title class_">Names</span>.<span class="property">Test</span>, &#123;</span><br><span class="line">     <span class="attr">state</span>:<span class="function">()=&gt;</span>&#123;</span><br><span class="line">         <span class="keyword">return</span> &#123;</span><br><span class="line">             <span class="attr">current</span>:<span class="number">1</span></span><br><span class="line">         &#125;</span><br><span class="line">     &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; defineStore &#125; <span class="keyword">from</span> <span class="string">&#x27;pinia&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; <span class="title class_">Names</span> &#125; <span class="keyword">from</span> <span class="string">&#x27;./store-namespce&#x27;</span></span><br><span class="line"> </span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> useTestStore = <span class="title function_">defineStore</span>(<span class="title class_">Names</span>.<span class="property">Test</span>, &#123;</span><br><span class="line">     <span class="attr">state</span>:<span class="function">()=&gt;</span>&#123;</span><br><span class="line">         <span class="keyword">return</span> &#123;</span><br><span class="line">             <span class="attr">current</span>:<span class="number">1</span></span><br><span class="line">         &#125;</span><br><span class="line">     &#125;,</span><br><span class="line">     <span class="comment">//类似于computed 可以帮我们去修饰我们的值</span></span><br><span class="line">     <span class="attr">getters</span>:&#123;</span><br><span class="line"> </span><br><span class="line">     &#125;,</span><br><span class="line">     <span class="comment">//可以操作异步 和 同步提交state</span></span><br><span class="line">     <span class="attr">actions</span>:&#123;</span><br><span class="line"> </span><br><span class="line">     &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h2 id="3State"><a href="#3State" class="headerlink" title="3State"></a>3State</h2><h3 id="1-State-是允许直接修改值的-例如current"><a href="#1-State-是允许直接修改值的-例如current" class="headerlink" title="1.State 是允许直接修改值的 例如current++"></a>1.State 是允许直接修改值的 例如current++</h3><figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">     <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">         <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;Add&quot;</span>&gt;</span>+<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">             &#123;&#123;Test.current&#125;&#125;</span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">     <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"> </span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">setup</span> <span class="attr">lang</span>=<span class="string">&#x27;ts&#x27;</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123;useTestStore&#125; <span class="keyword">from</span> <span class="string">&#x27;./store&#x27;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">const</span> <span class="title class_">Test</span> = <span class="title function_">useTestStore</span>()</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">const</span> <span class="title function_">Add</span> = (<span class="params"></span>) =&gt; &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title class_">Test</span>.<span class="property">current</span>++</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure>
<h3 id="2-批量修改State的值"><a href="#2-批量修改State的值" class="headerlink" title="2.批量修改State的值"></a>2.批量修改State的值</h3><p>在他的实例上有$patch方法可以批量修改多个值</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">     <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">         <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;Add&quot;</span>&gt;</span>+<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">             &#123;&#123;Test.current&#125;&#125;</span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            &#123;&#123;Test.age&#125;&#125;</span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">     <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"> </span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">setup</span> <span class="attr">lang</span>=<span class="string">&#x27;ts&#x27;</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123;useTestStore&#125; <span class="keyword">from</span> <span class="string">&#x27;./store&#x27;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">const</span> <span class="title class_">Test</span> = <span class="title function_">useTestStore</span>()</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">const</span> <span class="title function_">Add</span> = (<span class="params"></span>) =&gt; &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title class_">Test</span>.$patch(&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">       <span class="attr">current</span>:<span class="number">200</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">       <span class="attr">age</span>:<span class="number">300</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure>
<h3 id="3-批量修改函数形式"><a href="#3-批量修改函数形式" class="headerlink" title="3.批量修改函数形式"></a>3.批量修改函数形式</h3><p>推荐使用函数形式 可以自定义修改逻辑</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">     <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">         <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;Add&quot;</span>&gt;</span>+<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">             &#123;&#123;Test.current&#125;&#125;</span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            &#123;&#123;Test.age&#125;&#125;</span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">     <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"> </span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">setup</span> <span class="attr">lang</span>=<span class="string">&#x27;ts&#x27;</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123;useTestStore&#125; <span class="keyword">from</span> <span class="string">&#x27;./store&#x27;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">const</span> <span class="title class_">Test</span> = <span class="title function_">useTestStore</span>()</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">const</span> <span class="title function_">Add</span> = (<span class="params"></span>) =&gt; &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title class_">Test</span>.$patch(<span class="function">(<span class="params">state</span>)=&gt;</span>&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">       state.<span class="property">current</span>++;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">       state.<span class="property">age</span> = <span class="number">40</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure>
<h3 id="4-通过原始对象修改整个实例"><a href="#4-通过原始对象修改整个实例" class="headerlink" title="4.通过原始对象修改整个实例"></a>4.通过原始对象修改整个实例</h3><p>$state您可以通过将store的属性设置为新对象来替换store的整个状态</p>
<p>缺点就是必须修改整个对象的所有属性</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">     <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">         <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;Add&quot;</span>&gt;</span>+<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">             &#123;&#123;Test.current&#125;&#125;</span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            &#123;&#123;Test.age&#125;&#125;</span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">     <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"> </span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">setup</span> <span class="attr">lang</span>=<span class="string">&#x27;ts&#x27;</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123;useTestStore&#125; <span class="keyword">from</span> <span class="string">&#x27;./store&#x27;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">const</span> <span class="title class_">Test</span> = <span class="title function_">useTestStore</span>()</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">const</span> <span class="title function_">Add</span> = (<span class="params"></span>) =&gt; &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title class_">Test</span>.<span class="property">$state</span> = &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">       <span class="attr">current</span>:<span class="number">10</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">       <span class="attr">age</span>:<span class="number">30</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;    </span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure>
<h3 id="5-通过actions修改"><a href="#5-通过actions修改" class="headerlink" title="5.通过actions修改"></a>5.通过actions修改</h3><p>定义Actions</p>
<p>在actions 中直接使用this就可以指到state里面的值</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; defineStore &#125; <span class="keyword">from</span> <span class="string">&#x27;pinia&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; <span class="title class_">Names</span> &#125; <span class="keyword">from</span> <span class="string">&#x27;./store-naspace&#x27;</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> useTestStore = <span class="title function_">defineStore</span>(<span class="title class_">Names</span>.<span class="property">TEST</span>, &#123;</span><br><span class="line">     <span class="attr">state</span>:<span class="function">()=&gt;</span>&#123;</span><br><span class="line">         <span class="keyword">return</span> &#123;</span><br><span class="line">            <span class="attr">current</span>:<span class="number">1</span>,</span><br><span class="line">            <span class="attr">age</span>:<span class="number">30</span></span><br><span class="line">         &#125;</span><br><span class="line">     &#125;,</span><br><span class="line"> </span><br><span class="line">     <span class="attr">actions</span>:&#123;</span><br><span class="line">         setCurrent () &#123;</span><br><span class="line">             <span class="variable language_">this</span>.<span class="property">current</span>++</span><br><span class="line">         &#125;</span><br><span class="line">     &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">     &lt;div&gt;</span><br><span class="line">         &lt;button @click=&quot;Add&quot;&gt;+&lt;/button&gt;</span><br><span class="line">          &lt;div&gt;</span><br><span class="line">             &#123;&#123;Test.current&#125;&#125;</span><br><span class="line">          &lt;/div&gt;</span><br><span class="line">          &lt;div&gt;</span><br><span class="line">            &#123;&#123;Test.age&#125;&#125;</span><br><span class="line">          &lt;/div&gt;</span><br><span class="line">     &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"> </span><br><span class="line">&lt;script setup lang=&#x27;ts&#x27;&gt;</span><br><span class="line">import &#123;useTestStore&#125; from &#x27;./store&#x27;</span><br><span class="line">const Test = useTestStore()</span><br><span class="line">const Add = () =&gt; &#123;</span><br><span class="line">     Test.setCurrent()</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h2 id="4storeToRefs"><a href="#4storeToRefs" class="headerlink" title="4storeToRefs"></a>4storeToRefs</h2><p>在Pinia是不允许直接解构是会失去响应性的</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Test</span> = <span class="title function_">useTestStore</span>()</span><br><span class="line"><span class="keyword">const</span> &#123; current, name &#125; = <span class="title class_">Test</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(current, name);</span><br></pre></td></tr></table></figure>
<p>使用 storeToRefs</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; storeToRefs &#125; <span class="keyword">from</span> <span class="string">&#x27;pinia&#x27;</span></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">Test</span> = <span class="title function_">useTestStore</span>()</span><br><span class="line"><span class="keyword">const</span> &#123; current, name &#125; = <span class="title function_">storeToRefs</span>(<span class="title class_">Test</span>)</span><br></pre></td></tr></table></figure>
<h2 id="5Actions"><a href="#5Actions" class="headerlink" title="5Actions"></a>5Actions</h2><blockquote>
<p>Actions（支持同步异步）</p>
</blockquote>
<h3 id="1-同步-直接调用即可"><a href="#1-同步-直接调用即可" class="headerlink" title="1.同步 直接调用即可"></a>1.同步 直接调用即可</h3><figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; defineStore &#125; <span class="keyword">from</span> <span class="string">&#x27;pinia&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; <span class="title class_">Names</span> &#125; <span class="keyword">from</span> <span class="string">&#x27;./store-naspace&#x27;</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> useTestStore = <span class="title function_">defineStore</span>(<span class="title class_">Names</span>.<span class="property">TEST</span>, &#123;</span><br><span class="line">    <span class="attr">state</span>: <span class="function">() =&gt;</span> (&#123;</span><br><span class="line">        <span class="attr">counter</span>: <span class="number">0</span>,</span><br><span class="line">    &#125;),</span><br><span class="line">    <span class="attr">actions</span>: &#123;</span><br><span class="line">        <span class="title function_">increment</span>(<span class="params"></span>) &#123;</span><br><span class="line">            <span class="variable language_">this</span>.<span class="property">counter</span>++</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="title function_">randomizeCounter</span>(<span class="params"></span>) &#123;</span><br><span class="line">            <span class="variable language_">this</span>.<span class="property">counter</span> = <span class="title class_">Math</span>.<span class="title function_">round</span>(<span class="number">100</span> * <span class="title class_">Math</span>.<span class="title function_">random</span>())</span><br><span class="line">        &#125;,</span><br><span class="line">    &#125;,</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">     &lt;div&gt;</span><br><span class="line">         &lt;button @click=&quot;Add&quot;&gt;+&lt;/button&gt;</span><br><span class="line">          &lt;div&gt;</span><br><span class="line">             &#123;&#123;Test.counter&#125;&#125;</span><br><span class="line">          &lt;/div&gt;    </span><br><span class="line">     &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"> </span><br><span class="line">&lt;script setup lang=&#x27;ts&#x27;&gt;</span><br><span class="line">import &#123;useTestStore&#125; from &#x27;./store&#x27;</span><br><span class="line">const Test = useTestStore()</span><br><span class="line">const Add = () =&gt; &#123;</span><br><span class="line">     Test.randomizeCounter()</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h3 id="2-异步-可以结合async-await-修饰"><a href="#2-异步-可以结合async-await-修饰" class="headerlink" title="2.异步 可以结合async await 修饰"></a>2.异步 可以结合<a target="_blank" rel="noopener" href="https://so.csdn.net/so/search?q=async\&amp;spm=1001.2101.3001.7020">async</a> await 修饰</h3><figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; defineStore &#125; <span class="keyword">from</span> <span class="string">&#x27;pinia&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; <span class="title class_">Names</span> &#125; <span class="keyword">from</span> <span class="string">&#x27;./store-naspace&#x27;</span></span><br><span class="line"> </span><br><span class="line"><span class="keyword">type</span> <span class="title class_">Result</span> = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="built_in">string</span></span><br><span class="line">    <span class="attr">isChu</span>: <span class="built_in">boolean</span></span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="keyword">const</span> <span class="title class_">Login</span> = (): <span class="title class_">Promise</span>&lt;<span class="title class_">Result</span>&gt; =&gt; &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">            <span class="title function_">resolve</span>(&#123;</span><br><span class="line">                <span class="attr">name</span>: <span class="string">&#x27;小满&#x27;</span>,</span><br><span class="line">                <span class="attr">isChu</span>: <span class="literal">true</span></span><br><span class="line">            &#125;)</span><br><span class="line">        &#125;, <span class="number">3000</span>)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> useTestStore = <span class="title function_">defineStore</span>(<span class="title class_">Names</span>.<span class="property">TEST</span>, &#123;</span><br><span class="line">    <span class="attr">state</span>: <span class="function">() =&gt;</span> (&#123;</span><br><span class="line">        <span class="attr">user</span>: &lt;<span class="title class_">Result</span>&gt;&#123;&#125;,</span><br><span class="line">        <span class="attr">name</span>: <span class="string">&quot;123&quot;</span></span><br><span class="line">    &#125;),</span><br><span class="line">    <span class="attr">actions</span>: &#123;</span><br><span class="line">        <span class="keyword">async</span> <span class="title function_">getLoginInfo</span>(<span class="params"></span>) &#123;</span><br><span class="line">            <span class="keyword">const</span> result = <span class="keyword">await</span> <span class="title class_">Login</span>()</span><br><span class="line">            <span class="variable language_">this</span>.<span class="property">user</span> = result;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">     &lt;div&gt;</span><br><span class="line">         &lt;button @click=&quot;Add&quot;&gt;test&lt;/button&gt;</span><br><span class="line">          &lt;div&gt;</span><br><span class="line">             &#123;&#123;Test.user&#125;&#125;</span><br><span class="line">          &lt;/div&gt;    </span><br><span class="line">     &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"> </span><br><span class="line">&lt;script setup lang=&#x27;ts&#x27;&gt;</span><br><span class="line">import &#123;useTestStore&#125; from &#x27;./store&#x27;</span><br><span class="line">const Test = useTestStore()</span><br><span class="line">const Add = () =&gt; &#123;</span><br><span class="line">     Test.getLoginInfo()</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h3 id="3-多个action互相调用getLoginInfo-setName"><a href="#3-多个action互相调用getLoginInfo-setName" class="headerlink" title="3.多个action互相调用getLoginInfo  setName"></a>3.多个action互相调用getLoginInfo  setName</h3><figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">state</span>: <span class="function">() =&gt;</span> (&#123;</span><br><span class="line">    <span class="attr">user</span>: &lt;<span class="title class_">Result</span>&gt;&#123;&#125;,</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;default&quot;</span></span><br><span class="line">&#125;),</span><br><span class="line"><span class="attr">actions</span>: &#123;</span><br><span class="line">    <span class="keyword">async</span> <span class="title function_">getLoginInfo</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="keyword">const</span> result = <span class="keyword">await</span> <span class="title class_">Login</span>()</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">user</span> = result;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="title function_">setName</span>(result.<span class="property">name</span>)</span><br><span class="line">    &#125;,</span><br><span class="line">    setName (<span class="attr">name</span>:<span class="built_in">string</span>) &#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">name</span> = name;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
<h2 id="6getters"><a href="#6getters" class="headerlink" title="6getters"></a>6getters</h2><p>1.使用箭头函数不能使用this this指向已经改变指向undefined 修改值请用state</p>
<p>主要作用类似于computed 数据修饰并且有缓存</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">getters</span>:&#123;</span><br><span class="line">   <span class="attr">newPrice</span>:<span class="function">(<span class="params">state</span>)=&gt;</span>  <span class="string">`$<span class="subst">$&#123;state.user.price&#125;</span>`</span></span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
<p>2.普通函数形式可以使用this</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">getters</span>:&#123;</span><br><span class="line">   newCurrent ():<span class="built_in">number</span> &#123;</span><br><span class="line">       <span class="keyword">return</span> ++<span class="variable language_">this</span>.<span class="property">current</span></span><br><span class="line">   &#125;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
<p>3.getters 互相调用</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">getters</span>:&#123;</span><br><span class="line">   newCurrent ():<span class="built_in">number</span> | <span class="built_in">string</span> &#123;</span><br><span class="line">       <span class="keyword">return</span> ++<span class="variable language_">this</span>.<span class="property">current</span> + <span class="variable language_">this</span>.<span class="property">newName</span></span><br><span class="line">   &#125;,</span><br><span class="line">   newName ():<span class="built_in">string</span> &#123;</span><br><span class="line">       <span class="keyword">return</span> <span class="string">`$-<span class="subst">$&#123;<span class="variable language_">this</span>.name&#125;</span>`</span></span><br><span class="line">   &#125;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
<h2 id="7常用API"><a href="#7常用API" class="headerlink" title="7常用API"></a>7常用API</h2><h3 id="1-reset"><a href="#1-reset" class="headerlink" title="1.$reset"></a>1.$reset</h3><blockquote>
<p>重置<code>store</code>到他的初始状态</p>
</blockquote>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">state</span>: <span class="function">() =&gt;</span> (&#123;</span><br><span class="line">     <span class="attr">user</span>: &lt;<span class="title class_">Result</span>&gt;&#123;&#125;,</span><br><span class="line">     <span class="attr">name</span>: <span class="string">&quot;default&quot;</span>,</span><br><span class="line">     <span class="attr">current</span>:<span class="number">1</span></span><br><span class="line">&#125;),</span><br></pre></td></tr></table></figure>
<p>例如把值改变到了10</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title function_">change</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">     <span class="title class_">Test</span>.<span class="property">current</span>++</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>调用$reset();将会把state所有值 重置回 原始状态</p>
<h3 id="2-订阅state的改变"><a href="#2-订阅state的改变" class="headerlink" title="2.订阅state的改变"></a>2.订阅state的改变</h3><blockquote>
<p>类似于Vuex 的abscribe 只要有state 的变化就会走这个函数</p>
</blockquote>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">Test</span>.$subscribe(<span class="function">(<span class="params">args,state</span>)=&gt;</span>&#123;</span><br><span class="line">   <span class="variable language_">console</span>.<span class="title function_">log</span>(args,state);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>如果你的组件卸载之后还想继续调用请设置第二个参数</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">Test</span>.$subscribe(<span class="function">(<span class="params">args,state</span>)=&gt;</span>&#123;</span><br><span class="line">   <span class="variable language_">console</span>.<span class="title function_">log</span>(args,state);   </span><br><span class="line">&#125;,&#123;</span><br><span class="line">  <span class="attr">detached</span>:<span class="literal">true</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h3 id="3-订阅Actions的调用"><a href="#3-订阅Actions的调用" class="headerlink" title="3.订阅Actions的调用"></a>3.订阅Actions的调用</h3><figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">Test</span>.$onAction(<span class="function">(<span class="params">args</span>)=&gt;</span>&#123;</span><br><span class="line">   <span class="variable language_">console</span>.<span class="title function_">log</span>(args);  </span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
</article><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E5%89%8D%E7%AB%AF/">前端</a><a class="post-meta__tags" href="/tags/Vue/">Vue</a></div><div class="post_share"></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/blog/web/react%20%E8%B7%AF%E7%94%B1%E6%87%92%E5%8A%A0%E8%BD%BD/"><img class="prev-cover" src= "" data-lazy-src="/images/react.png" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">React 路由懒加载</div></div></a></div><div class="next-post pull-right"><a href="/blog/linux/vim%E5%B8%B8%E7%94%A8%E6%93%8D%E4%BD%9C/"><img class="next-cover" src= "" data-lazy-src="/images/vim.jpeg" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">vim常用操作</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span> 相关推荐</span></div><div class="relatedPosts-list"><div><a href="/blog/web/0 vue3项目创建手册/" title="Vue3 项目创建"><img class="cover" src= "" data-lazy-src="/images/vue.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2024-04-21</div><div class="title">Vue3 项目创建</div></div></a></div><div><a href="/blog/web/Pinia/" title="Pinia 使用"><img class="cover" src= "" data-lazy-src="/images/pinia.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2024-04-21</div><div class="title">Pinia 使用</div></div></a></div><div><a href="/blog/web/h5和小程序状态栏适配/" title="uni-app h5和小程序状态栏适配"><img class="cover" src= "" data-lazy-src="/images/uni-app.jpeg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2024-04-21</div><div class="title">uni-app h5和小程序状态栏适配</div></div></a></div><div><a href="/blog/utils/input 检验函数 vue3/" title="input 检验函数"><img class="cover" src= "" data-lazy-src="/images/utils.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2024-01-18</div><div class="title">input 检验函数</div></div></a></div><div><a href="/blog/utils/vue3 指令/" title="Vue3 指令"><img class="cover" src= "" data-lazy-src="/images/utils.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2024-01-18</div><div class="title">Vue3 指令</div></div></a></div><div><a href="/blog/utils/小程序base64转为本地文件（图片）/" title="小程序base64转为本地文件"><img class="cover" src= "" data-lazy-src="/images/utils.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2024-01-18</div><div class="title">小程序base64转为本地文件</div></div></a></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn card-announcement-animation"></i><span>公告</span></div><div class="announcement_content">一切解释权归本咸鱼所有</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%B8%80%E3%80%81Vue3%E5%9F%BA%E7%A1%80"><span class="toc-number">1.</span> <span class="toc-text">一、Vue3基础</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1%E3%80%81Ref%E5%85%A8%E5%AE%B6%E6%A1%B6"><span class="toc-number">1.1.</span> <span class="toc-text">1、Ref全家桶</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-ref"><span class="toc-number">1.1.1.</span> <span class="toc-text">1 ref</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-isRef"><span class="toc-number">1.1.2.</span> <span class="toc-text">2 isRef</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-shallowRef"><span class="toc-number">1.1.3.</span> <span class="toc-text">3 shallowRef</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-triggerRef"><span class="toc-number">1.1.4.</span> <span class="toc-text">4 triggerRef</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-customRef"><span class="toc-number">1.1.5.</span> <span class="toc-text">5 customRef</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2%E3%80%81Reactive%E5%85%A8%E5%AE%B6%E6%A1%B6"><span class="toc-number">1.2.</span> <span class="toc-text">2、Reactive全家桶</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-reactive"><span class="toc-number">1.2.1.</span> <span class="toc-text">1 reactive</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-readonly"><span class="toc-number">1.2.2.</span> <span class="toc-text">2 readonly</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-shallowReactive"><span class="toc-number">1.2.3.</span> <span class="toc-text">3 shallowReactive</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3%E3%80%81to%E7%B3%BB%E5%88%97%E5%85%A8%E5%AE%B6%E6%A1%B6"><span class="toc-number">1.3.</span> <span class="toc-text">3、to系列全家桶</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-toRef"><span class="toc-number">1.3.1.</span> <span class="toc-text">1 toRef</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-toRefs"><span class="toc-number">1.3.2.</span> <span class="toc-text">2 toRefs</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-toRaw"><span class="toc-number">1.3.3.</span> <span class="toc-text">3 toRaw</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4%E3%80%81computed%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7"><span class="toc-number">1.4.</span> <span class="toc-text">4、computed计算属性</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E5%87%BD%E6%95%B0%E5%BD%A2%E5%BC%8F"><span class="toc-number">1.4.1.</span> <span class="toc-text">1 函数形式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E5%AF%B9%E8%B1%A1%E5%BD%A2%E5%BC%8F"><span class="toc-number">1.4.2.</span> <span class="toc-text">2 对象形式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E6%A1%88%E4%BE%8B"><span class="toc-number">1.4.3.</span> <span class="toc-text">3 案例</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5%E3%80%81watch%E4%BE%A6%E5%90%AC%E5%99%A8"><span class="toc-number">1.5.</span> <span class="toc-text">5、watch侦听器</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E7%9B%91%E5%90%ACRef"><span class="toc-number">1.5.1.</span> <span class="toc-text">1 监听Ref</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E7%9B%91%E5%90%AC%E5%A4%9A%E4%B8%AAref"><span class="toc-number">1.5.2.</span> <span class="toc-text">2 监听多个ref</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E7%9B%91%E5%90%ACreactive-%E5%8D%95%E4%B8%80%E5%80%BC"><span class="toc-number">1.5.3.</span> <span class="toc-text">3 监听reactive 单一值</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6%E3%80%81watchEffect%E9%AB%98%E7%BA%A7%E4%BE%A6%E5%90%AC%E5%99%A8"><span class="toc-number">1.6.</span> <span class="toc-text">6、watchEffect高级侦听器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#7%E3%80%81%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F"><span class="toc-number">1.7.</span> <span class="toc-text">7、生命周期</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-onBeforeMount"><span class="toc-number">1.7.1.</span> <span class="toc-text">1 onBeforeMount()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-onMounted"><span class="toc-number">1.7.2.</span> <span class="toc-text">2 onMounted()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-onBeforeUpdate"><span class="toc-number">1.7.3.</span> <span class="toc-text">3 onBeforeUpdate()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-updated"><span class="toc-number">1.7.4.</span> <span class="toc-text">4 updated()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-onBeforeUnmount"><span class="toc-number">1.7.5.</span> <span class="toc-text">5 onBeforeUnmount()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#6-onUnmounted"><span class="toc-number">1.7.6.</span> <span class="toc-text">6 onUnmounted()</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#8%E3%80%81%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%8F%82"><span class="toc-number">1.8.</span> <span class="toc-text">8、组件传参</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E7%88%B6%E4%BC%A0%E5%AD%90"><span class="toc-number">1.8.1.</span> <span class="toc-text">1 父传子</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E9%BB%98%E8%AE%A4%E5%80%BC"><span class="toc-number">1.8.2.</span> <span class="toc-text">2 默认值</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E5%AD%90%E4%BC%A0%E7%88%B6"><span class="toc-number">1.8.3.</span> <span class="toc-text">3 子传父</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E5%AD%90%E7%BB%84%E4%BB%B6%E6%9A%B4%E9%9C%B2%E7%BB%99%E7%88%B6%E7%BB%84%E4%BB%B6%E5%86%85%E9%83%A8%E5%B1%9E%E6%80%A7"><span class="toc-number">1.8.4.</span> <span class="toc-text">4 子组件暴露给父组件内部属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-%E5%85%84%E5%BC%9F%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%8F%82"><span class="toc-number">1.8.5.</span> <span class="toc-text">5 兄弟组件传参</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#5-1-%E5%80%9F%E5%8A%A9%E7%88%B6%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%8F%82"><span class="toc-number">1.8.5.1.</span> <span class="toc-text">5.1.借助父组件传参</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#6-Event-Bus"><span class="toc-number">1.8.6.</span> <span class="toc-text">6.Event Bus</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#7-%E9%9B%86%E6%88%90Mitt"><span class="toc-number">1.8.7.</span> <span class="toc-text">7 集成Mitt</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#9%E3%80%81%E7%BB%84%E4%BB%B6"><span class="toc-number">1.9.</span> <span class="toc-text">9、组件</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E5%85%A8%E5%B1%80%E7%BB%84%E4%BB%B6"><span class="toc-number">1.9.1.</span> <span class="toc-text">1 全局组件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E5%B1%80%E9%83%A8%E7%BB%84%E4%BB%B6"><span class="toc-number">1.9.2.</span> <span class="toc-text">2 局部组件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E9%80%92%E5%BD%92%E7%BB%84%E4%BB%B6"><span class="toc-number">1.9.3.</span> <span class="toc-text">3 递归组件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6"><span class="toc-number">1.9.4.</span> <span class="toc-text">4 动态组件</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#10%E3%80%81%E6%8F%92%E6%A7%BDslot"><span class="toc-number">1.10.</span> <span class="toc-text">10、插槽slot</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E5%8C%BF%E5%90%8D%E6%8F%92%E6%A7%BD"><span class="toc-number">1.10.1.</span> <span class="toc-text">1 匿名插槽</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E5%85%B7%E5%90%8D%E6%8F%92%E6%A7%BD"><span class="toc-number">1.10.2.</span> <span class="toc-text">2 具名插槽</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD"><span class="toc-number">1.10.3.</span> <span class="toc-text">3 作用域插槽</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E5%8A%A8%E6%80%81%E6%8F%92%E6%A7%BD"><span class="toc-number">1.10.4.</span> <span class="toc-text">4 动态插槽</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#11%E3%80%81%E5%85%B6%E4%BB%96%E7%BB%84%E4%BB%B6"><span class="toc-number">1.11.</span> <span class="toc-text">11、其他组件</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E5%BC%82%E6%AD%A5%E7%BB%84%E4%BB%B6"><span class="toc-number">1.11.1.</span> <span class="toc-text">1 异步组件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E4%BB%A3%E7%A0%81%E5%88%86%E5%8C%85"><span class="toc-number">1.11.2.</span> <span class="toc-text">2 代码分包</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-suspense"><span class="toc-number">1.11.3.</span> <span class="toc-text">3 suspense</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-teleport"><span class="toc-number">1.11.4.</span> <span class="toc-text">4 teleport</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#12%E3%80%81keep-alive"><span class="toc-number">1.12.</span> <span class="toc-text">12、keep-alive</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#13%E3%80%81transition-%E8%BF%87%E6%B8%A1"><span class="toc-number">1.13.</span> <span class="toc-text">13、transition 过渡</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E8%BF%87%E6%B8%A1%E7%9A%84%E7%B1%BB%E5%90%8D"><span class="toc-number">1.13.1.</span> <span class="toc-text">1.过渡的类名</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E8%87%AA%E5%AE%9A%E4%B9%89%E8%BF%87%E6%B8%A1-class-%E7%B1%BB%E5%90%8D"><span class="toc-number">1.13.2.</span> <span class="toc-text">2.自定义过渡 class 类名</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E7%BB%93%E5%90%88css%E5%8A%A8%E7%94%BB%E5%BA%93"><span class="toc-number">1.13.3.</span> <span class="toc-text">3 结合css动画库</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-transition-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F"><span class="toc-number">1.13.4.</span> <span class="toc-text">4 .transition 生命周期</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-appear"><span class="toc-number">1.13.5.</span> <span class="toc-text">5 appear</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#14%E3%80%81transition-group"><span class="toc-number">1.14.</span> <span class="toc-text">14、transition-group</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E5%85%B3%E4%BA%8Etransition-group"><span class="toc-number">1.14.1.</span> <span class="toc-text">1 关于transition-group</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E5%88%97%E8%A1%A8%E7%9A%84%E7%A7%BB%E5%8A%A8%E8%BF%87%E6%B8%A1"><span class="toc-number">1.14.2.</span> <span class="toc-text">2.列表的移动过渡</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E7%8A%B6%E6%80%81%E8%BF%87%E6%B8%A1"><span class="toc-number">1.14.3.</span> <span class="toc-text">3.状态过渡</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#15%E3%80%81%E4%BE%9D%E8%B5%96%E6%B3%A8%E5%85%A5Provide-Inject"><span class="toc-number">1.15.</span> <span class="toc-text">15、依赖注入Provide &#x2F; Inject</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#16%E3%80%81v-model"><span class="toc-number">1.16.</span> <span class="toc-text">16、v-model</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E7%BB%91%E5%AE%9A%E5%8D%95%E4%B8%AA"><span class="toc-number">1.16.1.</span> <span class="toc-text">1 绑定单个</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E7%BB%91%E5%AE%9A%E5%A4%9A%E4%B8%AA"><span class="toc-number">1.16.2.</span> <span class="toc-text">2 绑定多个</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BF%AE%E9%A5%B0%E7%AC%A6"><span class="toc-number">1.16.3.</span> <span class="toc-text">3 自定义修饰符</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#17%E3%80%81directive%E6%8C%87%E4%BB%A4"><span class="toc-number">1.17.</span> <span class="toc-text">17、directive指令</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-Vue3%E6%8C%87%E4%BB%A4%E7%9A%84%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0"><span class="toc-number">1.17.1.</span> <span class="toc-text">1.Vue3指令的钩子函数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E5%9C%A8setup%E5%86%85%E5%AE%9A%E4%B9%89%E5%B1%80%E9%83%A8%E6%8C%87%E4%BB%A4"><span class="toc-number">1.17.2.</span> <span class="toc-text">2.在setup内定义局部指令</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90%E5%8F%82%E6%95%B0%E8%AF%A6%E8%A7%A3"><span class="toc-number">1.17.3.</span> <span class="toc-text">3.生命周期钩子参数详解</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E5%87%BD%E6%95%B0%E7%AE%80%E5%86%99"><span class="toc-number">1.17.4.</span> <span class="toc-text">4.函数简写</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#18%E3%80%81Hook"><span class="toc-number">1.18.</span> <span class="toc-text">18、Hook</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#19%E3%80%81%E5%85%A8%E5%B1%80%E5%87%BD%E6%95%B0%E5%92%8C%E5%8F%98%E9%87%8F"><span class="toc-number">1.19.</span> <span class="toc-text">19、全局函数和变量</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-globalProperties"><span class="toc-number">1.19.1.</span> <span class="toc-text">1 globalProperties</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E8%BF%87%E6%BB%A4%E5%99%A8Filter"><span class="toc-number">1.19.2.</span> <span class="toc-text">2 过滤器Filter</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#20%E3%80%81Vue3%E6%8F%92%E4%BB%B6"><span class="toc-number">1.20.</span> <span class="toc-text">20、Vue3插件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#21%E3%80%81%E5%85%B6%E4%BB%96"><span class="toc-number">1.21.</span> <span class="toc-text">21、其他</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-Vue%E5%A6%82%E4%BD%95%E5%BC%80%E5%8F%91%E7%A7%BB%E5%8A%A8%E7%AB%AF"><span class="toc-number">1.21.1.</span> <span class="toc-text">1 Vue如何开发移动端</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%BA%8C%E3%80%81vue-router"><span class="toc-number">2.</span> <span class="toc-text">二、vue-router</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-%E5%85%A5%E9%97%A8"><span class="toc-number">2.1.</span> <span class="toc-text">1 入门</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-1-%E5%AE%89%E8%A3%85"><span class="toc-number">2.1.1.</span> <span class="toc-text">1.1 安装</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-2-%E6%96%B0%E5%BB%BArouter-%E6%96%87%E4%BB%B6"><span class="toc-number">2.1.2.</span> <span class="toc-text">1.2 新建router 文件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-3%E9%A1%B5%E9%9D%A2"><span class="toc-number">2.1.3.</span> <span class="toc-text">1.3页面</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-4main-ts-%E6%8C%82%E8%BD%BD"><span class="toc-number">2.1.4.</span> <span class="toc-text">1.4main.ts 挂载</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2%E5%91%BD%E5%90%8D%E8%B7%AF%E7%94%B1-amp-%E7%BC%96%E7%A8%8B%E5%BC%8F%E5%AF%BC%E8%88%AA"><span class="toc-number">2.2.</span> <span class="toc-text">2命名路由&amp;编程式导航</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#2-1%E5%91%BD%E5%90%8D%E8%B7%AF%E7%94%B1"><span class="toc-number">2.2.1.</span> <span class="toc-text">2.1命名路由</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-2%E7%BC%96%E7%A8%8B%E5%BC%8F%E5%AF%BC%E8%88%AA"><span class="toc-number">2.2.2.</span> <span class="toc-text">2.2编程式导航</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3%E5%8E%86%E5%8F%B2%E8%AE%B0%E5%BD%95"><span class="toc-number">2.3.</span> <span class="toc-text">3历史记录</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#3-1replace"><span class="toc-number">2.3.1.</span> <span class="toc-text">3.1replace</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4%E8%B7%AF%E7%94%B1%E4%BC%A0%E5%8F%82"><span class="toc-number">2.4.</span> <span class="toc-text">4路由传参</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#4-1Query%E8%B7%AF%E7%94%B1%E4%BC%A0%E5%8F%82"><span class="toc-number">2.4.1.</span> <span class="toc-text">4.1Query路由传参</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-2Params%E8%B7%AF%E7%94%B1%E4%BC%A0%E5%8F%82"><span class="toc-number">2.4.2.</span> <span class="toc-text">4.2Params路由传参</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-3%E5%8A%A8%E6%80%81%E8%B7%AF%E7%94%B1%E4%BC%A0%E5%8F%82"><span class="toc-number">2.4.3.</span> <span class="toc-text">4.3动态路由传参</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5%E5%B5%8C%E5%A5%97%E8%B7%AF%E7%94%B1"><span class="toc-number">2.5.</span> <span class="toc-text">5嵌套路由</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6%E9%87%8D%E5%AE%9A%E5%90%91-amp-%E5%88%AB%E5%90%8D"><span class="toc-number">2.6.</span> <span class="toc-text">6重定向&amp;别名</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#6-1%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%BD%A2%E5%BC%8F"><span class="toc-number">2.6.1.</span> <span class="toc-text">6.1字符串形式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#6-2%E5%AF%B9%E8%B1%A1%E5%BD%A2%E5%BC%8F"><span class="toc-number">2.6.2.</span> <span class="toc-text">6.2对象形式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#6-3%E5%87%BD%E6%95%B0%E6%A8%A1%E5%BC%8F%EF%BC%88%E5%8F%AF%E4%BB%A5%E4%BC%A0%E5%8F%82%EF%BC%89"><span class="toc-number">2.6.3.</span> <span class="toc-text">6.3函数模式（可以传参）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#6-4%E5%88%AB%E5%90%8D-alias"><span class="toc-number">2.6.4.</span> <span class="toc-text">6.4别名 alias</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#7%E5%AF%BC%E8%88%AA%E5%AE%88%E5%8D%AB"><span class="toc-number">2.7.</span> <span class="toc-text">7导航守卫</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#7-1%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%AB"><span class="toc-number">2.7.1.</span> <span class="toc-text">7.1全局前置守卫</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#7-2%E5%85%A8%E5%B1%80%E5%90%8E%E7%BD%AE%E5%AE%88%E5%8D%AB"><span class="toc-number">2.7.2.</span> <span class="toc-text">7.2全局后置守卫</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#8%E8%B7%AF%E7%94%B1%E5%85%83%E4%BF%A1%E6%81%AF"><span class="toc-number">2.8.</span> <span class="toc-text">8路由元信息</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#9%E8%B7%AF%E7%94%B1%E8%BF%87%E6%B8%A1%E5%8A%A8%E6%95%88"><span class="toc-number">2.9.</span> <span class="toc-text">9路由过渡动效</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#10%E6%BB%9A%E5%8A%A8%E8%A1%8C%E4%B8%BA"><span class="toc-number">2.10.</span> <span class="toc-text">10滚动行为</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#11%E5%8A%A8%E6%80%81%E8%B7%AF%E7%94%B1"><span class="toc-number">2.11.</span> <span class="toc-text">11动态路由</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#11-1%E6%B7%BB%E5%8A%A0%E8%B7%AF%E7%94%B1"><span class="toc-number">2.11.1.</span> <span class="toc-text">11.1添加路由</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%B8%89%E3%80%81Pinia"><span class="toc-number">3.</span> <span class="toc-text">三、Pinia</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1%E8%B5%B7%E6%AD%A5-%E5%AE%89%E8%A3%85"><span class="toc-number">3.1.</span> <span class="toc-text">1起步 安装</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-1%E5%AE%89%E8%A3%85"><span class="toc-number">3.1.1.</span> <span class="toc-text">1.1安装</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-2%E5%BC%95%E5%85%A5%E6%B3%A8%E5%86%8C"><span class="toc-number">3.1.2.</span> <span class="toc-text">1.2引入注册</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2%E5%88%9D%E5%A7%8B%E5%8C%96%E4%BB%93%E5%BA%93Store"><span class="toc-number">3.2.</span> <span class="toc-text">2初始化仓库Store</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3State"><span class="toc-number">3.3.</span> <span class="toc-text">3State</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-State-%E6%98%AF%E5%85%81%E8%AE%B8%E7%9B%B4%E6%8E%A5%E4%BF%AE%E6%94%B9%E5%80%BC%E7%9A%84-%E4%BE%8B%E5%A6%82current"><span class="toc-number">3.3.1.</span> <span class="toc-text">1.State 是允许直接修改值的 例如current++</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E6%89%B9%E9%87%8F%E4%BF%AE%E6%94%B9State%E7%9A%84%E5%80%BC"><span class="toc-number">3.3.2.</span> <span class="toc-text">2.批量修改State的值</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E6%89%B9%E9%87%8F%E4%BF%AE%E6%94%B9%E5%87%BD%E6%95%B0%E5%BD%A2%E5%BC%8F"><span class="toc-number">3.3.3.</span> <span class="toc-text">3.批量修改函数形式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E9%80%9A%E8%BF%87%E5%8E%9F%E5%A7%8B%E5%AF%B9%E8%B1%A1%E4%BF%AE%E6%94%B9%E6%95%B4%E4%B8%AA%E5%AE%9E%E4%BE%8B"><span class="toc-number">3.3.4.</span> <span class="toc-text">4.通过原始对象修改整个实例</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-%E9%80%9A%E8%BF%87actions%E4%BF%AE%E6%94%B9"><span class="toc-number">3.3.5.</span> <span class="toc-text">5.通过actions修改</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4storeToRefs"><span class="toc-number">3.4.</span> <span class="toc-text">4storeToRefs</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5Actions"><span class="toc-number">3.5.</span> <span class="toc-text">5Actions</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E5%90%8C%E6%AD%A5-%E7%9B%B4%E6%8E%A5%E8%B0%83%E7%94%A8%E5%8D%B3%E5%8F%AF"><span class="toc-number">3.5.1.</span> <span class="toc-text">1.同步 直接调用即可</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E5%BC%82%E6%AD%A5-%E5%8F%AF%E4%BB%A5%E7%BB%93%E5%90%88async-await-%E4%BF%AE%E9%A5%B0"><span class="toc-number">3.5.2.</span> <span class="toc-text">2.异步 可以结合async await 修饰</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E5%A4%9A%E4%B8%AAaction%E4%BA%92%E7%9B%B8%E8%B0%83%E7%94%A8getLoginInfo-setName"><span class="toc-number">3.5.3.</span> <span class="toc-text">3.多个action互相调用getLoginInfo  setName</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6getters"><span class="toc-number">3.6.</span> <span class="toc-text">6getters</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#7%E5%B8%B8%E7%94%A8API"><span class="toc-number">3.7.</span> <span class="toc-text">7常用API</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-reset"><span class="toc-number">3.7.1.</span> <span class="toc-text">1.$reset</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E8%AE%A2%E9%98%85state%E7%9A%84%E6%94%B9%E5%8F%98"><span class="toc-number">3.7.2.</span> <span class="toc-text">2.订阅state的改变</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E8%AE%A2%E9%98%85Actions%E7%9A%84%E8%B0%83%E7%94%A8"><span class="toc-number">3.7.3.</span> <span class="toc-text">3.订阅Actions的调用</span></a></li></ol></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/blog/java/01%20Spring%20Security%20&amp;%20oauth2/" title="Spring Security &amp; Oauth2"><img src= "" data-lazy-src="/images/spring-security.jpeg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Spring Security &amp; Oauth2"/></a><div class="content"><a class="title" href="/blog/java/01%20Spring%20Security%20&amp;%20oauth2/" title="Spring Security &amp; Oauth2">Spring Security &amp; Oauth2</a><time datetime="2024-04-25T07:24:45.000Z" title="发表于 2024-04-25 15:24:45">2024-04-25</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/blog/java/02%20JWT%E5%B7%A5%E5%85%B7%E7%B1%BB/" title="JWT工具类"><img src= "" data-lazy-src="/images/jwt.jpeg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="JWT工具类"/></a><div class="content"><a class="title" href="/blog/java/02%20JWT%E5%B7%A5%E5%85%B7%E7%B1%BB/" title="JWT工具类">JWT工具类</a><time datetime="2024-04-25T07:24:45.000Z" title="发表于 2024-04-25 15:24:45">2024-04-25</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/blog/java/00%20Security%20%E9%9B%86%E6%88%90%E7%A4%BA%E4%BE%8B/" title="SpringSecurity 集成示例"><img src= "" data-lazy-src="/images/spring-security.jpeg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="SpringSecurity 集成示例"/></a><div class="content"><a class="title" href="/blog/java/00%20Security%20%E9%9B%86%E6%88%90%E7%A4%BA%E4%BE%8B/" title="SpringSecurity 集成示例">SpringSecurity 集成示例</a><time datetime="2024-04-25T07:24:43.000Z" title="发表于 2024-04-25 15:24:43">2024-04-25</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/blog/java/101%20Mybatis-plus%E5%BF%AB%E9%80%9F%E9%9B%86%E6%88%90/" title="MybatisPlus 快速集成"><img src= "" data-lazy-src="/images/mybatis-plus.jpeg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="MybatisPlus 快速集成"/></a><div class="content"><a class="title" href="/blog/java/101%20Mybatis-plus%E5%BF%AB%E9%80%9F%E9%9B%86%E6%88%90/" title="MybatisPlus 快速集成">MybatisPlus 快速集成</a><time datetime="2024-04-21T07:39:43.000Z" title="发表于 2024-04-21 15:39:43">2024-04-21</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/blog/java/10%20Mybatis%20%E5%BF%AB%E9%80%9F%E9%9B%86%E6%88%90/" title="Mybatis 快速集成"><img src= "" data-lazy-src="/images/mybaits.jpeg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Mybatis 快速集成"/></a><div class="content"><a class="title" href="/blog/java/10%20Mybatis%20%E5%BF%AB%E9%80%9F%E9%9B%86%E6%88%90/" title="Mybatis 快速集成">Mybatis 快速集成</a><time datetime="2024-04-21T07:24:43.000Z" title="发表于 2024-04-21 15:24:43">2024-04-21</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By mowei</div><div class="footer_custom_text">海内存知已，天涯若比邻</div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="font-plus" type="button" title="放大字体"><i class="fas fa-plus"></i></button><button id="font-minus" type="button" title="缩小字体"><i class="fas fa-minus"></i></button><button id="translateLink" type="button" title="简繁转换">繁</button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><div class="search-dialog__title" id="local-search-title">本地搜索</div><div id="local-input-panel"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div></div><hr/><div id="local-search-results"></div><span class="search-close-button"><i class="fas fa-times"></i></span></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/tw_cn.js"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="/js/search/local-search.js"></script><script>var preloader = {
  endLoading: () => {
    document.body.style.overflow = 'auto';
    document.getElementById('loading-box').classList.add("loaded")
  },
  initLoading: () => {
    document.body.style.overflow = '';
    document.getElementById('loading-box').classList.remove("loaded")

  }
}
window.addEventListener('load',preloader.endLoading())</script><div class="js-pjax"><script>if (document.getElementsByClassName('mermaid').length) {
  if (window.mermaidJsLoad) mermaid.init()
  else {
    getScript('https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js').then(() => {
      window.mermaidJsLoad = true
      mermaid.initialize({
        theme: 'default',
      })
      true && mermaid.init()
    })
  }
}</script></div><div class="aplayer no-destroy" data-id="9385310356" data-server="netease" data-type="playlist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-preload="none" data-autoplay="true" muted></div><canvas class="fireworks" mobile="false"></canvas><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/fireworks.min.js"></script><script defer="defer" id="fluttering_ribbon" mobile="false" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-fluttering-ribbon.min.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script><script src="https://cdn.jsdelivr.net/gh/metowolf/MetingJS@1.2/dist/Meting.min.js"></script><script src="https://cdn.jsdelivr.net/npm/pjax/pjax.min.js"></script><script>let pjaxSelectors = [
  'title',
  '#config-diff',
  '#body-wrap',
  '#rightside-config-hide',
  '#rightside-config-show',
  '.js-pjax'
]

if (false) {
  pjaxSelectors.unshift('meta[property="og:image"]', 'meta[property="og:title"]', 'meta[property="og:url"]')
}

var pjax = new Pjax({
  elements: 'a:not([target="_blank"])',
  selectors: pjaxSelectors,
  cacheBust: false,
  analytics: false,
  scrollRestoration: false
})

document.addEventListener('pjax:send', function () {

  // removeEventListener scroll 
  window.removeEventListener('scroll', window.tocScrollFn)
  window.removeEventListener('scroll', scrollCollect)

  typeof preloader === 'object' && preloader.initLoading()
  
  if (window.aplayers) {
    for (let i = 0; i < window.aplayers.length; i++) {
      if (!window.aplayers[i].options.fixed) {
        window.aplayers[i].destroy()
      }
    }
  }

  typeof typed === 'object' && typed.destroy()

  //reset readmode
  const $bodyClassList = document.body.classList
  $bodyClassList.contains('read-mode') && $bodyClassList.remove('read-mode')

})

document.addEventListener('pjax:complete', function () {
  window.refreshFn()

  document.querySelectorAll('script[data-pjax]').forEach(item => {
    const newScript = document.createElement('script')
    const content = item.text || item.textContent || item.innerHTML || ""
    Array.from(item.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value))
    newScript.appendChild(document.createTextNode(content))
    item.parentNode.replaceChild(newScript, item)
  })

  GLOBAL_CONFIG.islazyload && window.lazyLoadInstance.update()

  typeof chatBtnFn === 'function' && chatBtnFn()
  typeof panguInit === 'function' && panguInit()

  // google analytics
  typeof gtag === 'function' && gtag('config', '', {'page_path': window.location.pathname});

  // baidu analytics
  typeof _hmt === 'object' && _hmt.push(['_trackPageview',window.location.pathname]);

  typeof loadMeting === 'function' && document.getElementsByClassName('aplayer').length && loadMeting()

  // Analytics
  if (false) {
    MtaH5.pgv()
  }

  // prismjs
  typeof Prism === 'object' && Prism.highlightAll()

  typeof preloader === 'object' && preloader.endLoading()
})

document.addEventListener('pjax:error', (e) => {
  if (e.request.status === 404) {
    pjax.loadUrl('/404.html')
  }
})</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div><script src="/live2d_models/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2d_models/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2d_models/assets/wanko.model.json"},"display":{"position":"left","width":100,"height":150,"hOffset":-10,"vOffset":40},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body></html>